video 播放视频

最新推荐文章于 2025-05-06 22:06:11 发布

原创最新推荐文章于 2025-05-06 22:06:11 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Canvas #HTML5 #JavaScript

JS 同时被 2 个专栏收录

15 篇文章

订阅专栏

HTML5

13 篇文章

订阅专栏

个人原创,欢迎转载,转载请注明出处http://blog.youkuaiyun.com/bud_icelf QQ:909648986

video 播放视频

video是什么？

在HTML5中,通过video元素来包含视频。当前，video元素支持Ogg，MPEG 4，WebM三种视频格式。

例子1 一个简单的实例

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<video width="320" height="240" controls="controls">
		<source src="http://www.w3school.com.cn/i/movie.ogg">
		<source src="http://www.w3school.com.cn/i/movie.mp4">
		你的浏览器不支持video标签
	</video>
</body>
</html>

效果预览
你的浏览器不支持video标签

<video width="320" height="240" controls="controls">
添加video元素,设置属性width(宽)为320,height(高)为240,controls属性用于添加播放、暂停和音量控件。controls="controls"向用户显示控件。

<source src="http://www.w3school.com.cn/i/movie.ogg">
用source元素链接不同的视频文件。如果浏览器不支持第一个source元素链接的视频文件将跳到下一个视频文件。

例子2 使用DOM进行控制视频

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<div style="text-align:center;">
		<video width="320" height="240" id="myVideo">
			<source src="http://www.w3school.com.cn/i/movie.ogg">
			<source src="http://www.w3school.com.cn/i/movie.mp4">
			你的浏览器不支持video标签
		</video><br/>
		<button onclick="play()">播放</button>
		<button onclick="pause()">暂停</button>
		<button onclick="addPlaySpeed()">加速</button>
		<button onclick="subPlaySpeed()">减速</button>
		<button onclick="disableMute()">关闭声音</button>
		<button onclick="enableMute()">打开声音</button>
		<button onclick="setVolume()">音量设为0.2</button>
		<button onclick="enableLoop()">启用循环</button>
		<button onclick="disableLoop()">禁用循环</button>
		<button onclick="gotoAndPlay()">跳到第2秒</button>
		<button onclick="enlarge()">缩小</button>
		<button onclick="restore()">还原</button>
		<button onclick="getInfo()">获取视频信息</button>
	</div>
	<script type="text/javascript">
		var myVideo=document.getElementById("myVideo");
		function play(){
			myVideo.play();
		}
		function pause(){
			myVideo.pause();
		}
		function addPlaySpeed(){
			myVideo.playbackRate=1.5;
		}
		function subPlaySpeed(){
			myVideo.playbackRate=0.5;
		}
		function disableMute(){
			myVideo.muted=true;
		}
		function enableMute(){
			myVideo.muted=false;
		}
		function setVolume(){
			myVideo.volume=0.2;
		}
		function enableLoop(){
			myVideo.loop=true;
		}
		function disableLoop(){
			myVideo.loop=false;
		}
		function gotoAndPlay(){
			myVideo.currentTime=2;
		}
		function enlarge(){
			myVideo.width=120;
		}
		function restore(){
			myVideo.width=320;
		}
		function getInfo(){
			if(myVideo.readyState==4){
				var str="";
				str+="视频已加载完成。\n";
				str+="当前视频的URL："+myVideo.currentSrc+"\n";
				str+="视频的长度:"+myVideo.duration+"\n";
				str+="视频当前播放位置:"+myVideo.currentTime+"\n";
				str+="视频是否静音:"+myVideo.muted+"\n";
				str+="视频的播放速度:"+myVideo.playbackRate+"\n";
				str+="视频是否重新播放:"+myVideo.loop+"\n";
				str+="视频音量:"+myVideo.volume+"\n";
				alert(str);
			}else{
				alert("视频未加载完成");
			}
		}
	</script>
</body>
</html>

效果预览

你的浏览器不支持video标签

<div style="text-align:center;">
增加<div>元素，并将其文本水平对齐方式设为居中对齐。

<button onclick="play()">播放</button>
增加button元素，onclick="play()"，点击时执行play()方法。下面的依次类推。

function play(){
myVideo.play();
}
播放视频。

function pause(){
myVideo.pause();
}
暂停视频。

function addPlaySpeed(){
myVideo.playbackRate=1.5;
}
设置视频的当前播放速度为1.5倍。

function subPlaySpeed(){
myVideo.playbackRate=0.5;
}
设置视频的当前播放速度为0.5倍。

function disableMute(){
myVideo.muted=true;
}
设置视频静音。

function enableMute(){
myVideo.muted=false;
}
设置视频不静音。

function setVolume(){
myVideo.volume=0.2;
}
设置视频的当前音量为0.2(介于0.0(最低音量)与 1.0(最高音量)之间的数字)。

function enableLoop(){
myVideo.loop=true;
}
设置视频在结束时再次播放.

function disableLoop(){
myVideo.loop=false;
}
设置视频在结束时不再次播放.

function gotoAndPlay(){
myVideo.currentTime=2;
}
跳跃到视频的第2秒。

function enlarge(){
myVideo.width=120;
}
设置视频播放器的宽度为120像素。

function restore(){
myVideo.width=320;
}
设置视频播放器的宽度为320像素。

if(myVideo.readyState==4)
判断视频是否加载完成，视频加载完成readyState返回4。