我相信我在用 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 的新手,我仍在努力研究它。非常感谢任何有用的信息。
最佳答案
看起来 i
的值有误。尝试:
function videoSubmit(){
document.getElementById("player").setAttribute("src", videoList[ i - 1 ]);
}
还有一些其他问题。这是一个固定版本 - 享受:
另一个问题:
你不能这样做:
<video id="test" width="getWidth()" height="getHeight()">
如果您想以编程方式设置这些属性,则必须按照与 src 属性相同的方式进行设置。有时你会看到这种构造,但它很笨拙:
<script>document.write('<video id="test" width="' + getWidth() + '" ...')</script>
与 Q 无关——您可以通过直接跳转到 jquery 来跳过很多 javascript 学习的痛苦。它确实会导致页面加载损失,但它解决了纯 javascript 的许多烦恼。以老式的方式做这件事会给你“宝贵的经验”——我们这些拥有它的人可能更看重这一点。
关于javascript - 使用复选框和按钮更新 <video> src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11140402/