Html5中Video标签的基本使用

Sian · 发表于 2016-2-15 22:30:02

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
	<title>HTML5视频标签</title>
	<script>
		// 获取标签
		var video1 = null;
		window.onload = function(){
			video1 = document.getElementById("video1");
		}
		// 如果暂停则播放，否则暂停
		function playPause(){
			if(video1.paused){
				video1.play();
			}else{
				video1.pause();
			}
		}
		// 修改宽度
		function makeBig(){
			video1.style.width="400px";
		}
		function makeNormal(){
			video1.style.width="200px";
		}
		function makeSmall(){
			video1.style.width="100px";
		}
	</script>
	
</head>

<body>
	<!-- controls：显示控制进度条 autoplay：自动播放 loop：循环播放 muted：静音播放 poster：预览图-->
	<video id="video1" width="300" height="200" controls muted poster="http://www.yusian.com/download/sian.png">
		<source src="http://w3cschool.cn/movie.ogg" type="video/ogg">
		您的浏览器不支持HTML5视频播放
	</video>
	
	<div style="margin-top: 10px;width: 200px;text-align: center">
		<button>播放/暂停</button>
		<button>大</button>
		<button>中</button>
		<button>小</button>
	</div>
</body>
	
</html>

帐号		自动登录	找回密码
密码			立即注册

Html5中Video标签的基本使用

相关帖子