github：讲讲HTML5视频播放的方式
内容速递：看了本文您能了解到的知识！
HTML5视频想要网页播放视频再也不需要使用插件了，HTML本身就支持，而且更加稳定！
上节讲了HTML5的音频播放，和音频播放一样，需要借助flash才能在网页上使用视频。随着HTML5出来以后，就不需要借助flash了，本身可以通过video标签支持。
1、HTML5视频的播放方式HTML5视频的播放方式.drawio在HTML中播放视频并不容易！准确的来说是想要做好兼容并不容易！
1.1、embed方式embed定义一个外部的容器，用来装放MP4等视频文件。
例如
embedsrc="movie.swf"height=""width=""/
缺陷
embed标签在HTML4中是无效的，因为它是HTML5新出的标签依赖浏览器的支持如果浏览器不支持Flash，那么视频将无法播放1.2、obejct方式obejct也可以定义一个外部的容器，用来装放MP4等视频文件。
例如
objectdata="movie.swf"height=""width=""/
缺陷
依赖浏览器的支持依赖插件的安装如果浏览器不支持Flash，那么视频将无法播放1.3、video方式video标签是HTML5专门为视频出的一个标签。推荐使用！
videosrc="horse.mp4"controls/video
效果
image-缺陷
video标签在HTML4中是无效的，因为它是HTML5新出的标签
依赖浏览器的支持
2、最好的解决方案上面讲了三种使用视频的方式，可以将一些结合起来使用。
示例
videowidth=""height=""controls="controls"sourcesrc="movie.mp4"type="video/mp4"/sourcesrc="movie.ogg"type="video/ogg"/sourcesrc="movie.webm"type="video/webm"/objectdata="movie.mp4"width=""height=""embedsrc="movie.swf"width=""height=""//object/video
讲解
看到以上使用了4种不同的视频格式，这样做的好处video元素会尝试播放以mp4、ogg或webm格式中的一种来播放视频。如果均失败，则回退到embed元素。
效果
显示的效果基本与video一致！
image-3、视频格式video元素支持三种视频格式：MP4,WebM,和Ogg
格式MIME-typeMP4video/mp4WebMvideo/webmOggvideo/ogg4、video标签4.1、video的属性一些常用的video属性，全局属性在这里就没有列出来来了。更多请到w3school查阅。
属性描述autoplay设置或返回是否在加载完成后随即播放音频/视频controls设置或返回音频/视频是否显示控件（比如播放/暂停等）loop设置或返回音频/视频是否应在结束时重新播放muted设置或返回音频/视频是否静音preload设置或返回音频/视频是否应该在页面加载后进行加载src设置或返回音频/视频元素的当前来源4.2、video的事件事件这是我们用来跟音频发生交互的重要武器。
同样的只给出部分事件，更多请到w3school查阅。
事件描述pause当音频/视频已暂停时play当音频/视频已开始或不再暂停时playing当音频/视频在已因缓冲而暂停或停止后已就绪时canplay当浏览器可以播放音频/视频时timeupdate当目前的播放位置已更改时5、来一个视频播放器的案例讲了那么多，不就是等一个案例吗，来！
码上！
!doctypehtmlhtmllang="en"headmetacharset="UTF-8"metaname="viewport"content="width=device-width,initial-scale=1user-scalable=0"/titlevideo视频demo/titlestyle*{margin:0;padding:0;}body{-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:"微软雅黑"}h1{width:%;font-size:1.5em;text-align:center;line-height:3em;color:#a;}#video{margin:20px0;width:%;height:px;}/style/headbodyh1video视频播放demo/h1videoid="video"controlssrc="