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 に答える