正在更新 src，並帶有複選框和按鈕

我相信我在javascript中使用視頻播放器實現時存在一個相對簡單的問題。首先，我想向一個數組添加一個字符串，並在視頻標籤中引用該第一個字符串條目作爲我的源代碼的src。然後我希望視頻在接收到src後開始播放。正在更新 src，並帶有複選框和按鈕

我還沒有實現後者的代碼，因爲我還沒有過去前者。我看到人們在更改src之後引用了一個.load（）函數調用，但我不知道是否正確設置了src。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 

<style> 

video 
{ 
    background-color:#333; 
} 

</style> 

</head> 

<body> 

<script type="text/javascript"> 
var width = (1280 * 0.1); 
var height = (720 * 0.1); 
var resized = false; 

function getWidth(){ 
    return width; 
} 

function getHeight(){ 
    return height; 
} 


//Create array. Checkbox adds video to list. 
//"Submit" button gives first video in list to player. 

var videoList = new Array(); 
var i = 0; //incrementer 

//Use checkbox's value as argument 
function addVideo(value){ 
    videoList[i] = value; 
    i++; 
} 

function videoSubmit(){ 
    document.getElementById("player").setAttribute("src", videoList[i]); 
} 

</script> 

<video id="test" width="getWidth()" height="getHeight()"> 
<source id="player" src="null" type="video/avi" width="getWidth()"  height="getHeight()"/> 

</video> 
<br/> 

<form id="selector" action=""> 
<input type="checkbox" name="firstvideo" value="test.avi" onClick="addVideo(test.avi)"/> sample 1.avi<br/> 

</form> 

<button onClick="videoSubmit()"> Submit</button> 


</body> 
</html>

我對JavaScript很陌生，我仍然試圖繞過它。任何有用的信息，不勝感激。

來源

2012-06-21 akappel

看起來像i有錯誤的值。嘗試：

function videoSubmit(){ 
    document.getElementById("player").setAttribute("src", videoList[ i - 1 ]); 
}

還有一些其他問題。這裏有一個固定的版本 - 享受：

http://jsfiddle.net/mrSYC/

另一個問題：

你不能做到這一點：

<video id="test" width="getWidth()" height="getHeight()">

如果您希望通過編程設置的屬性，你都必須做與src屬性一樣。有時你會看到這種結構的，但它的笨拙：

<script>document.write('<video id="test" width="' + getWidth() + '" ...')</script>

無關到Q - 你可以通過直接跳躍到jQuery的跳過了很多的JavaScript學習的痛苦。它確實會導致頁面加載的懲罰，但它可以治癒純JavaScript的許多煩惱。以過時的方式做它會給你「寶貴的經驗」 - 我們這些人認爲它的價值可能超過保證。

http://jquery.com/

來源

2012-06-21 14:32:29 Julian

該變化沒有幫助，但感謝您參考jquery。一定會檢查出來。 – akappel

我爲你修好了 - 查看jsfiddle .. – Julian

你不要在這裏需要一個額外的source元素，可以簡單地針對video元素的src屬性。

因此，像：

document.getElementById('test').src = videoList[i];

應該是所有你需要做的（假設的videoList[i]值是一個有效的URL的視頻文件，並有問題的瀏覽器可以播放）。

來源

2012-06-21 16:31:55

正在更新 src，並帶有複選框和按鈕

回答

相關問題