Question

我正在尝试编写一个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);
}

Answer 1

您需要先阻止重定向链接，我已修改您的代码以使其在

下工作

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

Answer 2

执行此操作的最佳方法是：在此处添加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);

});

我已经测试了这个，但试一试让我知道

jQuery在链接点击上添加视频

2 个答案: