播放後重定向html5視頻

我有一個html 5視頻，我刪除了控制按鈕並添加了一個js代碼，以便用戶在點擊視頻時播放視頻。我需要做的是綁定一個額外的腳本，該腳本將在視頻播放後重定向頁面，而無需重新加載頁面。以下是我的js代碼。播放後重定向html5視頻

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>

來源

2012-05-02 jalf

沒有頁面重新加載？ – AlienWebguy

<script src="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-02 20:53:48 AlienWebguy

感謝AlienWebGuy。現在就試試吧。也感謝鏈接 – jalf

抱歉AlienWebguy，它不起作用。視頻結束後頁面不重定向 – jalf

我看到發生了什麼，你的函數被命名爲play，但是你的'onclick =「play（）」'正在播放視頻而不是調用該函數。只是重新命名了該功能。 – AlienWebguy

是否有這樣修改這個辦法它適用於自動播放的視頻？我認爲src =「text/javascript」而不是type =「text/javascript」是導致我死亡的原因，然後我意識到我在多個瀏覽器中獲得了不一致的結果。盡我所能追蹤它，那些正確解釋自動播放的程序並未正確執行此代碼，因爲從技術上講沒有'onclick';該視頻僅憑自己的喜悅，永遠不會觸發該功能。

來源

2012-11-05 14:19:05

我在另一個網站上發現了這個。這似乎很好地工作......

<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-06 22:53:55 Ashley

Ashley的代碼片段工作對我來說，雖然我必須確保不使用「循環」參數的視頻標籤，否則就沒有工作。

而且，我能夠擁有它自動播放，你可以在這個例子中看到：

<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-06 19:12:30

如果你想避免硬盤在應用程序中的編碼網址，而您只是想重置您的視頻和不一定導航到另一個頁面，我發現這是相當整潔。

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

你並不需要指定一個網址，包含視頻的當前頁面從緩存重新加載（如果可能的話），所以您不必再談論到服務器的開銷只是爲了重新顯示視頻。

來源

2014-11-19 22:53:56

<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-25 06:39:18

播放後重定向html5視頻

回答

相關問題