VideoJS - 在播放结束时执行 JS 函数答案

【问题标题】：VideoJS - Executing JS function at end of playbackVideoJS - 在播放结束时执行 JS 函数
【发布时间】：2014-09-26 11:09:37
【问题描述】：

我正在使用 VideoJS 在网页上播放视频。我想在视频结束时执行一个 java 脚本以隐藏视频 DIV 并显示另一个 DIV。

有人可以帮我做这个吗？

马克西米利安

【问题讨论】：

标签： html5-video video.js

【解决方案1】：

使用video.js API

videojs('my_video_1').on('ended',function() {
  // do something
})

【讨论】：

谢谢，我会试试这个，我会告诉你的

【解决方案2】：

谢谢您，您的解决方案运行良好。我做了以下事情来适应我所拥有的：

    <video id="video"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls preload="auto" width="800" height="450"
        poster="images/fond.png" data-setup='{}'>
        <source src="video/video.mp4" type="video/mp4" /> 
        <source src="video/video.webm" type="video/webm" /> 
        <source src="video/video.ogv" type="video/ogg" />
    </video>
    <div id="replacingdiv">
        <img class="replacingimg" src="./images/invitation.png" alt="Invitation" />
    </div>  



videojs("video").ready(function() {
        var myPlayer = this;    // Store the video object
        var aspectRatio = 9/16; // Make up an aspect ratio

        function resizeVideoJS() {
            // Get the parent element's actual width
            var width = $(window).width();
            if ( width < 800)  {
                myPlayer.width(width - 10).height( (width -10) * aspectRatio );
                $('.replacingimg').width(width - 10).height( (width -10) * aspectRatio);

            }
        }

        myPlayer.on('ended',function() {
            $('#video').delay( 2000 ).fadeOut( "slow" , function() {
                $('#replacingdiv').fadeIn("slow");
            });
        });

        resizeVideoJS(); // Initialize the function
        window.onresize = resizeVideoJS; // Call the function on resize
    });

【讨论】：

它解决了您的问题吗？由于您是新来的，如果您的问题已经解决，请不要忘记将答案标记为已接受。您可以单击答案旁边的复选标记将其从空心切换为绿色。如有任何问题，请参阅Help Center > Asking！

【解决方案3】：

   <body>
  <div class="vidBox" id="box">


     <div class="wrapper">
        <div class="videocontent">

           <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="auto" height="auto"  poster="posterWTA.png"
              data-setup={}>

              <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
              <track kind="subtitles" src="Subtitle.srt" srclang="en" label="01"></track>
              <track kind="subtitles" src="Subtitle_2.srt" srclang="en" label="02"></track>

           </video>
        </div>
     </div>

     <div id="other" style="display:none; width:400px; height:300px; background-color:#f0f0f0">
        This appears after the video ends

     </div>

  </div>
  <script>

     var vid=document.getElementById('my_video_1');
     vid.addEventListener("ended", hideVideo, false);

     function hideVideo() {
         var vid=document.getElementById('my_video_1');
         var other=document.getElementById('other');
         vid.removeEventListener("ended", hideVideo, false);
         vid.style.display='none';
         other.style.display='block';
     }
  </script>

【讨论】：

这不是使用 video.js 的正确方法。使用 Flash 后备时它不起作用。