HTML5学习笔记(三)

最新推荐文章于 2021-04-07 19:57:03 发布

wjlotus

最新推荐文章于 2021-04-07 19:57:03 发布

阅读量419

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/wjlotus/article/details/41051809

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML5多媒体支持

<viedo>格式Ogg、H.264、MPEG-4、WebM

<audio>格式Ogg Vorbis、MP3、Wav PCM、ACC、WebM

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>case1</title>
<style type="text/css">
* {
	margin:auto 0;
	padding:0px;
	text-align:center;
}
#bg {
	background-image: url(Snap2.jpg);
	height: 452px;
	width: 748px;
	text-align:center;
}
#v {
	height: 350px;
	width: 700px;
}
video {
	margin-top: 40px;
	margin-left: 10px;
}
#controlbar {
	margin-top: 50px;
}

#controlbar2 {
	margin-top:15px;
	color:#FFF;
	
}
#controlbar3 {
	margin-top:5px;
	color:#0C9;
	
	
}
</style>
</head>

<body>
<div id="bg">
  <div id="v">
  <video id="video1" src="xiong.webm" width="700px" height="350px" autoplay="true" loop="true" controls >
  </video>
  </div>
 
 <div id="controlbar">
    <button  id="bo" οnclick="play()">播放</button>
    <button id="ting" οnclick="pause()">暂停</button>
    <button id="again" οnclick="again()">重新播放</button>
    <button id="jin" οnclick="kuaijin()">快进</button>
    <button id="tui" οnclick="kuaitui()">快退</button>
    <button id="up" οnclick="up()">音量+</button>
    <button id="down" οnclick="down()">音量-</button>
    <button id="jiny" οnclick="silence()">静音</button> 
 </div>
 
 <div align="left"id="controlbar2" >   
 <div  id="state">当前状态：</div>
 </div>
 
 
 
</div>
<script type="text/javascript">
	var myVideo=document.getElementById("video1");
	if(myVideo.canPlayType)
	{
		myVideo.addEventListener('loadstart',video_load,false);
		myVideo.addEventListener('play',video_play,false);
		myVideo.addEventListener('playing',video_playing,false);
		myVideo.addEventListener('pause',video_pause,false);
		myVideo.addEventListener('volumechange',video_volumechange,false);
		myVideo.addEventListener('error',video_error,false);
	}
	
	function video_load()
	{
		document.getElementById('state').innerHTML="当前状态：开始加载视频";
	}
	function video_play()
	{
		document.getElementById('state').innerHTML="当前状态：即将播放视频";
	}
	function video_playing()
	{
		document.getElementById('state').innerHTML="当前状态：正在播放视频";
	}
	function video_pause()
	{
		document.getElementById('state').innerHTML="当前状态：暂停视频";
	}
	
	function video_volumechange()
	{
		alter("音量设置已改变");
	}
	
	function video_error()
	{
		var error1=	myVideo.error1;
		switch(error1.code)
		{
			case 1:
				alter("视频加载被终止");
				break;
			case 2:
				alter("解码失败，无法播放视频");
				break;
			case 3:
				alter("网络出现问题，请查看网络连接");
				break;
			case 4:
				alter("视频格式不被支持");
				break;
		}
	}
	
	
	
	function play()
	{ 
		if (myVideo.paused) 
		  myVideo.play(); 
	} 
	function pause()
	{
		if(myVideo.play)
		myVideo.pause();
	}
	function again()
	{
		myVideo.load();
	}
	function kuaijin()
	{
		myVideo.playbackRate+=5;
		speed=myVideo.playbackRate;	
	}
	function kuaitui()
	{
		myVideo.playbackRate-=5;
		if(myVideo.playbackRate<0)
		myVideo.playbackRate=0;
		speed=myVideo.playbackRate;
	}
	function up()
	{
		if(myVideo.volume<1)
			myVideo.volume+=0.1;
			volume=myVideo.volume;
	}
	function down()
	{
		if(myVideo.volume>0)
			myVideo.volume-=0.1;
			volume=myVideo.volume;
	}
	function silence()
	{
		var video1=document.getElementsByTagName("video")[0];
		if(video1.muted)
		{
			video1.muted=false;
			document.getElementById(silence).value="单击静音"	;
		}
		else{
				video1.muted=true;
				document.getElementById(silence).value="取消静音"	;
			}
	}
</script>
</body>
</html>