Question

我正在使用VideoJS在网页上播放视频。我想在视频结尾处执行oder中的java脚本来隐藏视频DIV并显示其他DIV。

有人可以帮我这么做吗？

马克西米

Answer 1

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

Answer 2

谢谢misterben你解决方案工作正常。我做了以下工作以适应我所拥有的：

    <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
    });

Answer 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>

VideoJS - 在播放结束时执行JS功能

3 个答案: