加載時在特定位置啓動HTML5視頻？

我試圖播放HTML5視頻（VP8編碼）。我想要的是在某個位置上播放它。比方說在50秒之後。加載時在特定位置啓動HTML5視頻？

我已經嘗試過，但似乎有一些問題。你能否建議我是否做錯了什麼？

下面是代碼：

<video id="vid1" width="640" height="360"> 
     <source src="file.webm" type="video/webm" /> 
     Your browser does not support the video tag. 
    </video> 
    <script> 
     document.getElementById('vid1').currentTime = 50; 
    </script>

我都試過，但它不工作。視頻加載時，它只是從開始播放。但是，如果我在播放過程中像這樣在播放視頻之後調用它，它可以正常工作。有什麼我失蹤？

來源

2011-05-12 Johnydep

什麼瀏覽器不支持？你有沒有嘗試延遲幾個毫秒的通話？也許需要更長的時間才能完全加載視頻元素 – Andre 2011-05-12 16:49:24

您必須等到瀏覽器知道視頻的持續時間後才能找到特定的時間。所以，我覺得要等待「等待loadedmetadata」事件是這樣的：

document.getElementById('vid1').addEventListener('loadedmetadata', function() { 
    this.currentTime = 50; 
}, false);

來源

2011-05-12 19:14:49

非常感謝，它在Chrome中運行得很好。 – Johnydep 2011-05-26 12:16:02

NICE功能。全部在一個... – 2011-11-04 01:29:30

這不適用於Safari。我也嘗試了loadeddata事件。有任何想法嗎？ – 2012-11-04 19:22:00

您可以Media Fragments URI直接鏈接，只需更改文件名file.webm＃T = 50

Here's an example

這很酷，你可以做各種各樣的事情。但我不知道瀏覽器支持的當前狀態。

來源

2011-05-12 21:14:59 rlovtang

瀏覽器支持很好。我認爲所有支持HTML5的瀏覽器都至少支持基本的時態媒體片段。IE不支持 – 2013-06-07 20:47:06

，大問題。 – 2015-03-25 14:42:07

@michaelhanon，爲了實現這一點，爲IE編寫一個polyfill將會相當容易。檢測瀏覽器，如果不支持，分解URL，查找查詢參數，使用Javascript來改變視頻的時間...我可能會這樣做，如果我有機會 – gdgr 2016-02-23 10:41:19

在用於HLS源的Safari Mac上，我需要使用loadeddata事件而不是元數據事件。

來源

2012-07-31 16:44:01

我認爲loadedmetadata應該是正確的事件，但我除非我聽取數據加密，否則也只能在seekable.length 0（僅適用於OSX上的Safari）。謝謝 – Statuswoe 2015-07-02 14:11:41

這是爲什麼downvoted？這可能與OP提供的例子沒有直接關係，但它對於問題的一般主題是事實準確和相關的。 – JayPea 2015-11-19 21:08:50

調整在html5中使用視頻標籤時的視頻開始和結束時間;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

其中左逗號的是在開始時間（秒），逗號的右邊是在秒的結束時間。刪除逗號和結束時間僅影響開始時間。

來源

2012-12-05 02:20:16 BobK

第二位數字似乎沒有結束多少視頻加載開始...第一位數字工作壽。有什麼想法嗎？ – Martian2049 2018-03-10 14:00:14

使用#t=10,20片段爲我工作。

來源

2014-02-17 17:55:03 Kamila

IE不支持!!!!!! – 2015-03-25 14:42:40

第二位數字似乎沒有結束多少視頻加載開始...第一位數字工作壽。有什麼想法嗎？ – Martian2049 2018-03-10 13:59:36

，而不使用JAVASCRIPT

只需添加#t=[(start_time), (end_time)]到您的媒體網址的結尾。唯一的挫折（如果你想這樣看），你需要知道你的視頻多長時間來表示結束時間。 例子：

<video> 
    <source src="splash.mp4#t=10,20" type="video/mp4"> 
</video>

注：在IE

來源

2014-08-11 03:45:23 anita

IE不支持!!!!!! – 2015-03-25 14:42:30

證實在IE中不工作==問題瀏覽器 – 2017-02-02 20:36:23

第二個數字似乎並沒有結束多少視頻加載開始...第一個數字工作壽。有什麼想法嗎？ – Martian2049 2018-03-10 13:59:20

加載時在特定位置啓動HTML5視頻？

回答

相關問題