当前位置: 首页 > 技术随笔 > 使用html5 video实现视频播放

使用html5 video实现视频播放

在前面的《html5 Canvas绘制图形入门详解》系列文章中,我们学习了如何使用html5 canvas进行绘图。在html5中,我们不仅可以按照自己的意愿绘制图形,还可以使用html5提供的<video>标签实现视频播放、使用html5提供的<audio>标签实现音频播放。

今天,我们就来初步学习如何使用html5的<video>标签实现视频播放功能。

在html5出现之前,想要在浏览器中实现视频播放功能,就必须使用额外的插件或控件来实现。不过,自从html5问世以后,这样的局面有所改变。现在,我们使用html5的video标签,可以不依赖于任何第三方的插件或控件,直接在浏览器中实现视频播放功能,

俗话说「知己知彼,百战百胜」。对于video标签而言,同样也是如此,只有先了解了video标签,使用起来才能得心应手。现在,我们就来看看video标签具备哪些标签属性(如果video标签具有以下属性就表示启用该属性所表示的功能,不添加对应的属性就表示禁用对应的功能):

video标签属性基本描述
width设置视频播放器的宽度
height设置视频播放器的高度
src设置用于播放的视频的URL
autoplay设置视频在加载完毕后自动开始播放。属性值为"autoplay"
controls显示具备播放、暂停等功能的控件。属性值为"controls"
loop视频在播放完毕后重新循环播放。属性值为"loop"
preload指定视频在页面加载时进行加载,并预备播放。属性值为"preload",如果使用 "autoplay",则忽略该属性。

在了解了video标签之后,下面我们就使用html5的video标签来实现视频播放。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 video视频播放入门示例</title>
</head>
<body>

<!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 -->
<video id="myVideo" src="Enola - I Can Make A Mess.mp4" autoplay="autoplay" controls="controls" loop="loop">
您的浏览器不支持video标签。
</video>
</body>
</html>

现在,我们打开浏览器,看一看具体的效果:

使用video标签添加的视频播放器使用video标签添加的视频播放器

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

为了更好地兼容各种浏览器,你可以为一个video标签添加多个source子标签,每个source标签引用一个不同格式的视频文件。这样,html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放,从而实现兼容多个浏览器的视频播放功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 video视频播放入门示例</title>
</head>
<body>

<!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 -->
<video id="myVideo" autoplay="autoplay" controls="controls" loop="loop">
	<!-- 提供多种格式的视频文件,以便浏览器从中播放自身支持的视频文件 -->
	<source src="北京欢迎你.mp4" ></source>
	<source src="北京欢迎你.ogg" ></source>
	<source src="北京欢迎你.webm" ></source>
您的浏览器不支持video标签。
</video>
</body>
</html>
28 2
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。

HTML5