HTML 5 视频(video)_html/css_WEB-ITnose

video 元素支持三种视频格式

IE Firefox Opera Chrome Safari

带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件	No	3.5+	10.5+	5.0+	No
带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件	9.0+	No	No	5.0+	3.0+
带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件	No	4.0+	10.6+	6.0+	No

 

 

 

 

 

1、设置一个ogg格式的文件

执行如下：

当浏览器不支持ogg格式时则显示“您的浏览器不支持 video 标签。”

2、设置多种格式

执行如下：

 

如上图为视频设置一个默认图片。也可以添加其他属性。

controls/controls="controls" 显示播放按钮
autoplay/autoplay="autoplay" 立即播放
loop/loop="loop" 循环播放
muted/muted="muted" 静音
preload/preload="preload" 加载视频d
poster="路径" 显示默认图片

3、自定义播放暂停及大小(Video + DOM)

 播放/暂停
  更改大小

 

将javascript写在html的下方

function playPause()
{
   i f (myVideo.paused)
       myVideo.play();  //播放
   else
      myVideo.pause(); //暂停
}

function makeNormal()
{
    myVideo.width=420; //自定义宽度，高度自适应
}

执行如下：

 大多数浏览器支持的视频方法、属性和事件（日后在做理解）

方法 属性 事件

play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth立即执行--视频元素前执行	progress
canPlayType()	videoHeight立即执行--视频元素前执行	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

 

 

 

 

 

 

 

 

 

 

 

 

 

下方为html5 视频和音频的方法属性和事件参考

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp