Want to redirect video viewers to a new page or website when a video finishes playing? This short HTML and JavaScript code example demonstrates how to do it with an mp4 video on a web page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#myVideo").bind('ended', function(){ location.href="https://www.google.com"; }); }); </script> <video id="myVideo" width="320" height="240" controls="controls"> <source src="travis_scott_drake.mp4" type="video/mp4" /> <source src="travis_scott_drake.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> |
The provided HTML and JavaScript code snippet serves to control the behavior of an HTML5 video element with the ID “myVideo.” The code imports the jQuery library from a URL and utilizes JavaScript to add functionality to the video playback. When the webpage loads and the document is ready, a jQuery function is triggered.
This function binds to the “ended” event of the video, which occurs when the video playback reaches its end. Upon reaching the end of the video, the script redirects the user’s browser to the URL “https://www.google.com.”
The HTML code following the script tags defines the video player element with the ID “myVideo,” providing a video source in both MP4 and OGG formats, along with a fallback message for unsupported browsers. This combination of HTML and JavaScript ensures that once the video finishes playing, the user is automatically directed to Google’s homepage.