video的切换和相关操作

最新推荐文章于 2024-01-18 23:45:00 发布

原创最新推荐文章于 2024-01-18 23:45:00 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #HTML5 #video

本文介绍了一个简单的HTML5视频播放器实现方案，包括如何设置视频的自动播放、控制条及响应式布局，并通过JavaScript实现了视频源的动态切换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			video::-webkit-media-controls-enclosure {
			    overflow:hidden;
			}
			video::-webkit-media-controls-panel {
			     width: calc(100% + 30px); 
			}
		</style>
	</head>
	<body>
		<video id="vio" width="100%" height="" autoplay="" controls="" poster="http://wow.techbrood.com/uploads/141102/star.png">
			<source src="c.mp4" type="video/mp4"></source>
			当前浏览器不支持 video直接播放
		</video>	
		<button id="btn">点击切换视频</button>
	</body>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("#btn").on("click",function(){
			$("#vio source").attr("src","http://wow.techbrood.com/uploads/141102/chrome_japan.mp4");
			document.getElementById("vio").load()
		})
	</script>
</html>