html5視頻按鈕，需要視頻到特定時間

我想放置一個視頻，自動播放沒有控制，但我想在視頻下面添加三個自定義按鈕，每個按鈕跳轉到特定時間的視頻。不使用Youtube，Vimeo或任何其他託管視頻。我已經能夠鏈接到特定的時間，但是這會打開一個新窗口並且不能跨瀏覽器兼容。這可能嗎？html5視頻按鈕，需要視頻到特定時間

<video id="movie" style="border:none;" width="575" height="240" preload autoplay controls> 
<source src="video.ogv" type="video/ogg; codecs=theora,vorbis" /> 
<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" /> 
<source src="video.webm" type="video/webm; codecs=vp8,vorbis" /> 
</video> 

<p class="navBtns"> 
<a href="video.ogv#t=9" target="_blank"><img src="dot.png" /></a> 
<a href="video.ogv#t=17" target="_blank"><img src="dot.png" /></a> 
<a href="video.ogv#t=29" target="_blank"><img src="dot.png" /></a> 
</p> 

<script> 
var v = document.getElementsByTagName('video')[0]; 
v.removeAttribute('controls') // '' in Chrome, "true" in FF9 (string) 
v.controls // true 
</script>

來源

2013-02-22 Nathan

你的腳本在哪裏？ – KyelJmD 2013-02-22 13:30:56

一切都是可能的，但沒有你的腳本，我們不能幫你。 – Tbi45 2013-02-22 13:33:59

謝謝，我添加了我必須輸入的腳本。 – Nathan 2013-02-22 14:02:11

您的鏈接設有兩個不同的問題：

他們有目標=「_空白」屬性，爲此他們打開一個新窗口/標籤。（擺脫那些）
你鏈接到視頻本身，而不是嵌入視頻的頁面。這只是不會按預期工作。

要直接控制頁面上的視頻而不離開頁面，您需要一些javascript。在這裏你會找到一個如何工作的例子。

JS Fiddle: Video CurrentTime Example

你需要一個函數跳轉到你的鏈接之一的點擊的具體時間，這將是（例如）：

var firstlink = document.getElementByTagName('a')[0]; 
firstlink.addEventListener("click", function (event) { 
    event.preventDefault(); 
    myvideo.currentTime = 7; 
    myvideo.play(); 
}, false);

來源

2013-02-22 14:16:06 codecandies

這讓我走向了正確的方向，正是我所期待的。謝謝！ – Nathan 2013-02-22 14:38:28

您可以設置currentTime屬性的視頻。使用你的例子：

var vidLinks = document.querySelectorAll('.navBtns a'); 

for(var i = 0, l = vidLinks.length; ++i){ 
    makeVideoLink(vidLinks[i]); 
} 

function jumpToTime(time){ 
    v.currentTime = time; 
} 

function makeVideoLink(element){ 
    // Extract the `t=` hash from the link 
    var timestamp = element.hash.match(/\d+$/,'')[0] * 1000; 

    element.addEventListener('click', function videoLinkClick(e){ 
     jumpToTime(timestamp); 

     return false; 
    },false) 
}

Mozilla的開發者網絡站點有a great list of HTML5 media element properties。

來源

2013-02-22 14:16:21 Barney

html5視頻按鈕，需要視頻到特定時間

回答

相關問題