如何使用html5播放视频

1、<video src="hanggemp4" controls></video>1
2，通过width和height设置视频窗口大小
<video src="hanggemp4" controls width="400" height="300"></video>1
3，预加载媒体文件
设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件：
（1）值为auto：让浏览器自动下载整个文件
（2）值为none：让浏览器不必预先下载文件
（3）值为metadata：让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）
<!-- 用户点击播放才开始下载 --><video src="hanggemp4" controls preload="none"></video>12
4，自动播放
（1）使用autoplay属性可以让浏览器加载完视频文件后立即播放。
<video src="hanggemp4" controls autoplay></video>1
（2）如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。
<video src="hanggemp4" controls autoplay muted></video>1
5，循环播放
使用loop属性让视频播放结束时，再从头开始播放。
<video src="hanggemp4" controls loop></video>1
6，设置替换视频的（封面）
通过poster属性可以设置，浏览器在下面三种情况下会使用这个：
（1）视频第一帧未加载完毕
（2）把preload属性设置为none
（3）没有找到指定的视频文件
<video src="hanggemp4" controls poster="hanggepng"></video>1
7，浏览器兼容，如何让每一个浏览器都能顺利播放视频
现在大部分浏览器都能支持H264格式的视频，但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：
（1）使用多种视频格式
<video>和<audio>元素有个内置的格式后备系统。我们不使用src属性，而是在其内部嵌套一组<source>元素，浏览器会选择播放第一个它所支持的文件。
我们可以添加WebM格式的视频提供对Opera的支持。
<video controls>
<source src="hanggemp4" type="video/mp4">
<source src="hanggewebm" type="video/webm">
</video>1234
（2）添加Flash后备措施（推荐）
上面那个方法不推荐，应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连<video>元素都不支持的老浏览器。
这里使用Flowplayer Flash作为备用播放器（本地下载 ：flowplayer-3218zip）
<video controls>
<source src="hanggemp4" type="video/mp4">
<source src="hanggewebm" type="video/webm">
<object id="flowplayer" width="400" height="300"
data="flowplayer-3218swf"
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3218swf">
<param name="flashvars" value='config={"clip":"hanggemp4"}'>
</object>
</video>1234567891011
（3）也有人优先使用Flash，而HTML5作为后备措施。
这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户
<object id="flowplayer" width="400" height="300" data="flowplayer-3218swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3218swf">
<param name="flashvars" value='config={"clip":"hanggemp4"}'>
<video controls>
<source src="hanggemp4" type="video/mp4">
<source src="hanggewebm" type="video/webm">
</video>
</object>

可以用video标签插入视频。

1、新建html文件，在body标签中添加video标签，为video标签添加“src”属性，属性值为视频的位置，这时视频就被插入到网页中去了；

2、为video标签添加“controls”属性，不需要添加属性值，这时视频中将会出现视频控制按钮；

3、video默认的宽高是视频自身的宽高，可以通过添加“width”和“height”属性自定义视频的宽高；

4、为video添加“autoplay”属性，属性值为“autoplay”，这时当视频加载完成时会自动播放。

新建个个video，指定播放列表的第一个视频路径为src。监听end事件，即一旦该视频播放完毕就回调里面把video的src改成列表的下一个，再play（播放）
代码示例：
var vList = ['视频地址url1', 'url2', '']; // 初始化播放列表
var vLen = vListlength; // 播放列表的长度
var curr = 0; // 当前播放的视频
var video = new Video();
videoaddEventListener('end', play);
play();
function play(e) {
videosrc = vList[curr];
videoload(); // 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可
videoplay();
curr++;
if (curr >= vLen) curr = 0; // 播放完了，重新播放
}
如此即可可以实现html5 播放多个视频连续播放

正常馁，，浏览器的下载是206，所以在下载的时候会一段一段的下载media资源，如果可以，建议还是使用Flash兼容部分浏览器，另外，能否将源码贴上来，将浏览器的版本贴上来？chrome的查看版本是chrome://version

HTML5是下一代的HTML，提供了展示视频的标准，规定了一种通过video元素来包含视频的标准方法。

Video有以下的属性。

autoplay  autoplay  如果出现该属性，则视频在就绪后马上播放。

controls  controls  如果出现该属性，则向用户显示控件，比如播放按钮。

height    pixels  设置视频播放器的高度。

loop     loop  如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload   preload  如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用"autoplay"，则忽略该属性。

src       url  要播放的视频的URL。

width     pixels  设置视频播放器的宽度。

在网络等都正常的情况下，有时浏览器会出现无法播放一些视频。这里解决两种比较可能的原因。其一，开启了硬件加速；其二，双显卡用户，对浏览器选择了高性能模式。解决方法如下：

必备材料：电脑，视频软件

1、开启了硬件加速，导致了视频无法正常播。因此鼠标右键，选择关闭硬件加速即可。

2、上面的过程可以解决一些Flash视频播放的问题，但是一些网站的Html5视频可能会仍然出现无法正常播放的情况。图为一网页的Html5视频。

3、这是显卡兼容性导致的。因此可以桌面右键，选择配置可交换显卡。

4、在所有应用程序中，找到浏览器，将高性能改为省电，并点击应用。

5、切回浏览器，刷新网页视频，即可正常播放视频。

---