Question

我相信我在javascript中使用视频播放器实现的问题相对简单。首先，我想在数组中添加一个字符串，并在我的视频标记中引用第一个字符串条目作为我的源代码的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很新，我仍然试图绕过它。非常感谢任何有用的信息。

Answer 1

看起来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/

Answer 2

您在此处不需要额外的source元素，只需定位src元素的video属性。

类似于：

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

应该是您需要做的所有事情（假设videoList[i]的值是视频文件的有效URL并且相关浏览器可以播放它。）

使用复选框和按钮</video>更新<video> src

2 个答案: