使用复选框和按钮更新<视频> src
Updating <video> src with checkbox and button
我相信我在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 ]);
}
还有其他一些问题。 这是一个固定版本 - 享受:
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/
这里不需要额外的source
元素,只需定位video
元素的src
属性即可。
所以像这样:
document.getElementById('test').src = videoList[i];
应该是您需要做的(假设 videoList[i]
的值是视频文件的有效 URL,并且有问题的浏览器可以播放它)。
相关文章:
- Mozilla没有;t在附加视频src后触发视频后台事件
- 使用json数据更改视频标签中的src属性
- html视频播放器并不总是从src读取
- setAttribute和video.src用于更改IE9中不起作用的视频标记源
- 如何从浏览器隐藏视频src属性's检查元素
- 如果img src以http://img.youtube.com/vi/并在任何字符后替换为youtube视频ifram
- 如何仅使用Javascript从视频中提取base64 src
- Innerhtml禁用视频src
- Jquery 更改视频源 Src 没有预期的影响
- 视频 src 不会在单击其他对象时重新加载
- 使用复选框和按钮更新<视频> src
- 修改其<源>元素的 src 属性后,视频不会更新
- HTML5 更改视频上的 src
- 如何通过单击包含其他视频 src [Java 脚本] 的链接来获得视频 src
- 如何使用来自 IP 网络摄像头应用程序的 jpeg 流作为 html5 视频标签中的 src
- 在javascript中替换HTML5视频src字符串不会替换视频
- 通过javascript更改视频src
- 通过onClick更改多个视频src
- YouTube嵌入的视频在动态更新iframe-src时停止播放
- 在souce代码中的视频标签src属性中显示不同的URL或隐藏URL