html5播放视频文件代码

⑴ 怎样实现 html5 多个视频在同一个<video>标签上播放

new个video，指定播放列表的第一个视频路径为src。监听end事件，回调里面把video的src改成列表的下一个，再play

代码示例：

varvList=['视频地址url1','url2','...'];//初始化播放列表
varvLen=vList.length;//播放列表的长度

varcurr=0;//当前播放的视频
varvideo=newVideo();
video.addEventListener('end',play);
play();

functionplay(e){
video.src=vList[curr];
video.load();//如果短的话，可以加载完成之后再播放，监听canplaythrough事件即可
video.play();

curr++;
if(curr>=vLen)curr=0;//播放完了，重新播放
}

可以实现html5 播放多个视频。一个接一个的播放

⑵ 在HTML5中，视频应如何播放

实现网页在线视频播放的几种方法主要有三种：使用HTML5的video标签，使用Flash插件，以及使用HTML5的canvas元素和JavaScript。

首先，HTML5的video标签是最简单和最常见的方式。你只需在HTML代码中添加一个video标签，然后通过src属性指定视频文件的路径。

例如：您的浏览器不支持Video标签。

这段代码会在支持的浏览器中显示一个视频播放器，用户可以点击播放、暂停等控制按钮。如果浏览器不支持video标签，就会显示标签内的文字。

其次，Flash插件是早期的网页视频播放解决方案，但由于其安全性和性能问题，现在已经逐渐被HTML5取代。使用Flash需要安装插件，而且并非所有浏览器都支持，所以它的应用范围已经越来越小。

最后，HTML5的canvas元素和JavaScript可以实现更复杂的视频播放控制，比如视频滤镜、实时视频处理等。这需要较高的编程技巧，但可以实现更多的创新和定制化功能。例如，你可以使用canvas的drawImage方法将视频帧绘制到canvas上，然后通过JavaScript控制播放和暂停。

总的来说，这三种方法各有优缺点，你可以根据具体的需求和情况选择适合的方法。如果你只需要简单的视频播放功能，那么HTML5的video标签是最方便的选择。如果你需要更多的控制和定制化功能，那么可以考虑使用canvas和JavaScript。而Flash由于其局限性，现在已经不推荐使用。

⑶ html5如何实现自动播放视频

我们使抄用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

⑷ html中怎么实现自动播放视频与音乐文件

HTML5中的video和audio标签中有一个autoplay属性，添加这个属性后就会在文件加载完成以后自动播放。具体代码如下：

video：

<videoautoplay="autoplay">
<sourcesrc="视频路径"/>
</video>

audio：

<audioautoplay="autoplay">
<sourcesrc="视频路径"/>
</audio>

除此属性外还有如下属性：

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

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

URL：要播放的视频的 URL。

⑸ 如何使用html5播放视频

1、<video src="hangge.mp4" controls></video>1

2，通过width和height设置视频窗口大小
<video src="hangge.mp4" controls width="400" height="300"></video>1

3，预加载媒体文件
设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件：
（1）值为auto：让浏览器自动下载整个文件
（2）值为none：让浏览器不必预先下载文件
（3）值为metadata：让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）
<!-- 用户点击播放才开始下载 --><video src="hangge.mp4" controls preload="none"></video>12

4，自动播放
（1）使用autoplay属性可以让浏览器加载完视频文件后立即播放。
<video src="hangge.mp4" controls autoplay></video>1

（2）如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。
<video src="hangge.mp4" controls autoplay muted></video>1

5，循环播放
使用loop属性让视频播放结束时，再从头开始播放。
<video src="hangge.mp4" controls loop></video>1

6，设置替换视频的图片（封面图片）
通过poster属性可以设置，浏览器在下面三种情况下会使用这个图片：
（1）视频第一帧未加载完毕
（2）把preload属性设置为none
（3）没有找到指定的视频文件
<video src="hangge.mp4" controls poster="hangge.png"></video>1

7，浏览器兼容，如何让每一个浏览器都能顺利播放视频
现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：
（1）使用多种视频格式
<video>和<audio>元素有个内置的格式后备系统。我们不使用src属性，而是在其内部嵌套一组<source>元素，浏览器会选择播放第一个它所支持的文件。
我们可以添加WebM格式的视频提供对Opera的支持。
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>1234

（2）添加Flash后备措施（推荐）
上面那个方法不推荐，应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连<video>元素都不支持的老浏览器。
这里使用Flowplayer Flash作为备用播放器（本地下载 ：flowplayer-3.2.18.zip）
<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">

<object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>
</object>
</video>1234567891011

（3）也有人优先使用Flash，而HTML5作为后备措施。
这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户
<object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.18.swf">
<param name="flashvars" value='config={"clip":"hangge.mp4"}'>

<video controls>
<source src="hangge.mp4" type="video/mp4">
<source src="hangge.webm" type="video/webm">
</video>
</object>