在重定向到另一个页面之前播放视频

时间:2013-10-29 15:18:42

标签: javascript jquery html html5

我想使用视频作为背景自动延伸到整个屏幕,这样如果页面被加载,那么在加载内容之前视频播放5秒然后它暂停并且内容是加载并在用户点击其他链接时再次开始播放,并且在视频播放完成之前不会重定向用户。

 $(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});

我的代码工作得很好,只是因为我不知道如何在不使用中间页面的情况下重定向到另一个页面之前播放视频

3 个答案:

答案 0 :(得分:1)

认为你需要这样的东西:

$( "a" ).click(function( event ) {
  event.preventDefault();

  var link = $(this).attr('href');

  BV.play();
  BV.addEvent("ended", endFunc);

  function endFunc(link) {
    window.location = link;
  };
});

答案 1 :(得分:1)

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" preload="auto">
 <source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

</body>
</html>

答案 2 :(得分:1)

<script type="text/javascript">

function vidplay() {
   var video = document.getElementById("Video1");
   var button = document.getElementById("play");
   if (video.paused) {
      video.play();
      button.textContent = "||";
   } else {
      video.pause();
      button.textContent = ">";
   }
}

function restart() {
    var video = document.getElementById("Video1");
    video.currentTime = 0;
}

function skip(value) {
    var video = document.getElementById("Video1");
    video.currentTime += value;
}      
</script>

</head>
<body>        

<video id="Video1" >
//  Replace these with your own video files. 
 <source src="demo.mp4" type="video/mp4" />
 <source src="demo.ogv" type="video/ogg" />
 HTML5 Video is required for this example. 
 <a href="demo.mp4">Download the video</a> file. 
</video>

<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button> 
<button id="rew" onclick="skip(-10)">&lt;&lt;</button>
<button id="play" onclick="vidplay()">&gt;</button>
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>