0

我正在尝试编写一个 jQuery 脚本，每当在某个页面上单击链接时，都会将视频附加到正文中，播放视频，然后它会转到链接的预期目标。

到目前为止，这就是我所拥有的：

HTML

<body>
<div id="videoHolder">
<a href="http://www.google.com">Google, as an example</a>
</div>
</body>

jQuery

window.onbeforeunload=function(event) {
$("#videoHolder").html(
'<video width="600" height="600" autoplay="autoplay">' +
    '<source src="images/doors.mp4" type="video/mp4"></source>' +
     '</video>');
    setTimeout('window.location.href=' + $('a').attr(href), 5000);
}
4

2 回答 2

0

您需要先防止链接重定向，我已经修改了您的代码以使其在下面工作

<html>
  <head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
    $('a').click(function(event) {
        // prevent the navigation from happening
        event.stopImmediatePropagation();
        event.preventDefault();

        // play the video
        $("#videoHolder").html(
        '<video width="600" height="600" autoplay="autoplay">' +
            '<source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4"></source>' +
             '</video>');

        // redirect the user
        var url = $(this).attr('href');
        setTimeout(function() { window.location = url }, 5000);

        });
      });
    </script>     
  </head>
  <body>
    <div id="videoHolder">
      <a href="http://www.google.com">Google, as an example</a>
    </div>
  </body>
</html>
于 2012-10-23T14:06:30.647 回答
0

最好的方法是：添加一个 id 标签到这样的：

<span link ='images/doors.mp4' id='watch_video' />Click to view video</span>

然后在jquery上工作：

$("#watch_video").live("click", function(){
   var getlink = $(this).attr("href");

   var htmls = '<video width="600" height="600" autoplay="autoplay">' +
               '<source src="'+ getlink +'" type="video/mp4"></source>' +
               '</video>');

    $("#videoHolder").html(html);

});

我还没有测试过这个，但试一试让我知道

于 2012-10-23T14:06:48.240 回答