html5如何更改video的src属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5如何更改video的src属性相关的知识，希望对你有一定的参考价值。
添加了一个video和一个form，先要在form里填写url将其提交后，video的src变为提交的url。怎么做？（原谅我不太会说明）
一、什么是video的src属性
所谓的video的src属性是指给与 html 5 中的<video> 标签一定的属性赋值
其中包括如下几个属性
二、HTML 5 中如何更改video的src属性
<video src="movie.ogg" controls="controls">浏览器不支持 video 标签。
</video>
这里以一段简单的 HTML 5 中的video代码作为实例进行解析
1、要更改video播放窗口的宽度和高度，那么，修改代码如下：
<video src="movie.ogg" controls="controls">浏览器不支持 video 标签。
</video>
2、指定video播放窗口的宽度和高度并默认自动播放，那么，修改代码如下：
<video src="movie.ogg" controls="controls" autoplay>浏览器不支持 video 标签。
</video> 参考技术A <!DOCTYPE html>
<html>
<head>
<title>test video</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<input type="text" placeholder="enter video url to play." id="t_url">
<input type="button" value="play" id="t_btn">
<video src="movie.ogg" controls="controls" autoplay="false" id="v_video" preload='no'>
您的浏览器不支持 video 标签。
</video>
</div>
<script type="text/javascript">
$(function()
$("#t_btn").click(function()
if(!$("#t_url").val())
alert("url不能为空.");
else
$("#v_video").attr("src",$("#t_url").val());//更新url
$("#v_video").attr("autoplay","true");//直接播放
);
);
</script>
</body>
</html>
已实测，chrome完美实现，更新后直接播放，请采纳！本回答被提问者采纳 参考技术B
使用如下方式修改视频的播放地址,参考链接:https://bbs.csdn.net/topics/392007814
var videoSrc = data.videoUrl;//新的视频播放地址
document.getElementById("videoid").src=videoSrc ;
document.getElementById("videoid").play();
如何在移动设备上更改 HTML5 视频的播放速度？
【中文标题】如何在移动设备上更改 HTML5 视频的播放速度？【英文标题】：How to change the playing speed of videos in HTML5 on mobile? 【发布时间】：2016-05-25 03:35:54 【问题描述】：根据this site，这在playbackRate 和defaultPlaybackRate 属性中得到支持，可通过DOM 访问。但这不适用于移动设备。示例：
<!DOCTYPE html>
<video id="my-video" src="chubby-bubbies.ogv" ...></video>
<script type="text/javascript">
/* play video twice as fast */
document.getElementById("my-video").defaultPlaybackRate = 2.0;
document.getElementById("my-video").play();
/* now play three times as fast just for the heck of it */
document.getElementById("my-video").playbackRate = 3.0;
</script>
以上内容适用于 Chrome，也适用于桌面版 Firefox 20 and above。
【问题讨论】：
我认为这与移动端 html 视频的限制有关。在用户点击播放视频之前，您无法控制视频元素。您不能通过 JS 强制视频开始播放。 【参考方案1】：答案很简单，移动 Chrome (Android) 不支持播放速率更改，即使该网站表示支持：https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement#AutoCompatibilityTable
这是移动端播放速率变化支持的真实浏览器：
Chrome 20+ ✔ 火狐 20+ ✔ IE 9+ ✔ Safari 6+ ✔ Opera 15+ ✔ 移动 Chrome (Android) ✖ 移动 Firefox 24+ ✔ IE 移动 ✖ 移动版 Safari 6+ (iOS) ✔ Opera 手机 ✖我创建了一个网站并通过首先将以下内容添加到 web.config 文件来对其进行测试：
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
</staticContent>
</system.webServer>
然后我将一个简单的视频上传到我的网站并上传到 Azure 以在不同的浏览器中进行测试：http://pandasneezy.azurewebsites.net/
我建议您使用 Mobile Firefox 24+，它应该可以正常工作
：
document.getElementById("my-video").playbackRate = 3.0;
【讨论】：
在 firefox HTML5 视频播放速率有效。知道如何调整 youtube 嵌入式视频的播放速率。我尝试使用 youtube 的 javascript API，但它不适用于 firefox 和 chrome。 看看这个：***.com/questions/22604934/… 我查过了。player.setPlaybackRate(2); 不适用于移动 chrome/firefox。它仍然以 1 倍的速度播放
Mobile Firefox 24+ ✔ 应该是 ✖ 那么？
是的，Mobile Firefox 24+ 是 ✖ 移动版。以上是关于html5如何更改video的src属性的主要内容，如果未能解决你的问题，请参考以下文章
Jquery更改HTML5的video标签的属性，实现更换视频的效果。或者提供一个可行的思路
如何动态更改多个video标签的src路径？比如src=a/x.mp4(x=1-10)
结束播放功能上的 HTML5 视频循环 src 更改不起作用
防止 HTML 5 `video` 在 src 更改时闪烁海报图像