2

ビデオがクリックされたときにユーザーがビデオを再生できるように、コントロールボタンを削除してjsコードを追加したhtml5ビデオがあります。私がする必要があるのは、ページをリロードせずにビデオが再生された後にページをリダイレクトする追加のスクリプトをバインドすることです。以下は私のjsコードです。

function play(){
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
}

そしてこれが私のHTML5ビデオコードです

<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
4

6 に答える 6

13 
<script type="text/javascript">
// Do not name the function "play()"
function playVideo(){
    var video = document.getElementById('video');
    video.play();
    video.addEventListener('ended',function(){
        window.location = 'http://www.google.com';
    });
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
    <source src="video/Motion.mp4" type="video/mp4" />
</video>

バインドできるメディアイベントのリストは次のとおりです。http：//dev.w3.org/html5/spec/Overview.html#mediaevents

于 2012-05-02T20:53:48.800 に答える
8

これは別のサイトで見つけました。うまく機能しているようです...

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript">
      $(document).ready(function(){   
       $("#myVideo").bind('ended', function(){
          location.href="http://www.localhost.com";   
       }); 
      });
    </script>

    <video id="myVideo" width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
        Your browser does not support the video tag.
    </video>
于 2013-08-06T22:53:55.317 に答える
2

自動再生される動画で機能するようにこれを変更する方法はありますか？type = "text/javascript"の代わりにsrc="text / javascript"が私を殺していると思ったのですが、いくつかのブラウザで一貫性のない結果が得られていることに気づきました。私が追跡できる最善の方法として、自動再生を適切に解釈するものは、技術的には「onclick」がないため、このコードを適切に実行していません。ビデオはそれ自体で陽気な方向に進み、関数をトリガーすることはありません。

于 2012-11-05T14:19:05.483 に答える
1 
 <script>
      var vid = document.getElementById("myvideo");
      vid.onended = function() {
            window.open("index.html", "_self");
      };
</script>
<video controls id="myvideo" width="770" height="882">
    <source src="video/Motion.mp4" type="video/mp4"/>
</video>
于 2016-11-25T06:39:18.117 に答える
0

アシュリーのコードスニペットは私のために機能しましたが、ビデオタグで「ループ」パラメータを使用しないようにする必要がありました。そうしないと機能しませんでした。

また、この例でわかるように、自動再生することができました。

<video id="thevideo" width="1280" preload="auto" autoplay="autoplay"> 
  <source src="your-video.mp4" type="video/mp4" />
  <source src="your-video.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>
于 2014-11-06T19:12:30.250 に答える
0

アプリケーションでURLをハードコーディングすることを避け、ビデオをリセットするだけで、必ずしも別のページに移動する必要がない場合は、これが非常に適切であることがわかりました。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /> 
<script type="text/javascript">
            $(document).ready(function(){   
                $("#yourVideoID").bind('ended', function(){
                    location.reload(false);                     
                }); 
            });
</script>

URLを指定する必要はありません。ビデオを含む現在のページがキャッシュから再ロードされるため（可能な場合）、ビデオを再表示するためだけにサーバーと再度通信するオーバーヘッドがありません。

于 2014-11-19T22:53:56.913 に答える