2012-03-29 51 views
1

我是一個JavaScript新手,構建了一個使用HTML5視頻練習的簡單頁面。它基本上是一個完整的循環視頻和一個JavaScript定時器,可以跟蹤和更新頁面上的時間。 (啓發,當然,由Infinite Drunk Ron Swanson)。這是頁面的live version。注意:兩個鏈接都會播放聲音。在JavaScript中替換HTML5視頻src字符串並不取代視頻

我希望腳本選擇七個視頻中的一個在頁面加載時播放。代碼應選擇1到7之間的隨機整數,生成字符串到「media /」目錄中的相應文件,並用新字符串替換視頻<source>標記的src屬性。

這一切似乎一切正常:沒有錯誤在控制檯,本地或上傳至GitHub上的頁面,當我檢查Chrome開發人員工具欄中的<video>元素,我可以看到代碼替換src字符串正確。但該網頁似乎並未加載不同的視頻!這是額外的煩惱,因爲它在前幾次提交時正常工作。我回過頭看看發生了什麼變化,但我找不到任何東西。

我來自Python,我懷疑有些東西我還沒有得到,但我不知道該怎麼做!

更新:我已經解決了這個問題的this question的幫助下,通過使用createElementappendChild插入源標籤,而不是改變由querySelectorAll返回在NodeList每個元素的屬性。這裏是相關的新代碼:

function add_source(element, src, type) { 
    var source = document.createElement("source"); 
    source.src = src; 
    source.type = type; 
    element.appendChild(source); 
    } 

function main() { 
    var video_no = random_int(1,7); 
    var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4"; 
    var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm"; 
    var videoplayer = document.querySelector(".videoplayer"); 
    add_source(videoplayer, video_string_mpeg, "video/mp4"); 
    add_source(videoplayer, video_string_mpeg, "video/webm"); 
    get_seconds(); 
    } 

這很好,但我不完全明白它爲什麼起作用。解釋仍然是歡迎的!

這裏的JavaScript:

start = new Date(); 
start_time = start.getTime(); 

function get_seconds() { 
    var now = new Date(); 
    var time_now = now.getTime(); 
    var time_diff = time_now - start_time; 
    var seconds = time_diff/1000; 
    var timer_string = Math.round(seconds); 
    document.getElementById("timer").innerHTML = timer_string; 
    window.setTimeout("get_seconds();", 1000); 
    } 

function random_int(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; } 


function main() { 
    var video_no = random_int(1,7); 
    var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4"; 
    var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm"; 
    var sources = document.querySelectorAll(".videoplayer source"); 
    sources.item(0).src = video_string_mpeg; 
    sources.item(1).src = video_string_webm; 
    get_seconds(); 
    } 

和HTML:

<html> 
<link rel="stylesheet" href="charleston.css"> 
<script src="charleston.js" type="text/javascript"> 
</script> 

<body onload="main();"> 
<video class="videoplayer" loop autoplay> 
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.mp4" type="video/mp4" /> 
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.webm" type="video/webm" /> 
Christ on a cracker, Trudy! Update your web browser! 
<audio loop autoplay> 
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.mp3" type="audio/mpeg" /> 
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.ogg" type="audio/ogg" /> 
</audio> 
</video> 
<div class="timer_box"> 
<p>Hell's bells, Trudy! You've been dancing for <a id="timer">0</a> seconds. 
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p> 
</div> 
</body> 
</html> 

我不認爲CSS或媒體文件的問題,但你可以看到他們在project repository,如果你我喜歡。現場版本可用here。 (注意:它播放聲音)。正如你所看到的,除了選擇不同的視頻之外,它可以完成所有的事

回答

3

我相信你也可以在你的視頻對象上調用​​重新加載在相應視頻對象中定義的<source>

「當你的聽衆功能被觸發時,它應該改變媒體的src屬性,然後調用加載方法加載新媒體和播放方法播放,如清單3-4。」 - Apple