Html5视频播放video标签使用详解【转】

1,下面是一个播放视频的最简单样例

(controls属性告诉浏览器要有基本播放控件)

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

2,通过widthheight设置视频窗口大小

<video src="hangge.mp4" controls width="400" height="300"></video>

3,预加载媒体文件

设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:

(1)值为auto:让浏览器自动下载整个文件

(2)值为none:让浏览器不必预先下载文件

(3)值为metadata:让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息(比如视频的总时长,第一帧图像等)

<!-- 用户点击播放才开始下载 -->

<video src="hangge.mp4" controls preload="none"></video>

4,自动播放

(1)使用autoplay属性可以让浏览器加载完视频文件后立即播放。

<video src="hangge.mp4" controls autoplay></video>

(2)如果启用自动播放,可以将播放器设置为muted状态。这样自动播放时会静音,防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

<video src="hangge.mp4" controls autoplay muted></video>

5,循环播放

使用loop属性让视频播放结束时,再从头开始播放。

<video src="hangge.mp4" controls loop></video>

6,设置替换视频的图片(封面图片)

通过poster属性可以设置,浏览器在下面三种情况下会使用这个图片:

(1)视频第一帧未加载完毕

(2)把preload属性设置为none

(3)没有找到指定的视频文件

<video src="hangge.mp4" controls poster="hangge.png"></video>

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>

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>

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>

更多技术好文,关注微信公众号“挨踢学霸”

原文地址:https://www.cnblogs.com/itxb/p/8799223.html

时间: 2024-10-12 05:50:39

Html5视频播放video标签使用详解【转】的相关文章

Struts标签库详解【3】

struts2标签库详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@taglib prefix="s" uri="/struts-tags" %> If elseif  else 描述: 执行基本的条件流转. 参数: 名称 必需 默认 类型 描述 备注 test 是 boolean 决定标志里的内容是否显示的表达式 else标志没有这个参数 id 否 Object/String 用来标识元素的

meta标签之详解

meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head><meta http-equiv="content-Type" content="text/html; charset=gb2312"></head> 也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集:可以设定页面格式及刷新等等.

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio> <video> 标签属性: src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放

标签知识详解

不干胶也叫自粘标签材料,是以纸张.薄膜或特种材料为面料,背面涂有胶粘剂,以涂硅保护纸为底纸的一种复合材料.由于涂布技术有多种,致使不干胶材料形成有不同档次,目前的发展方向是由传统的辊式涂布.刮刀涂布向高压流延涂布方向发展,以最大限度保证涂布的均匀感性,避免气泡和针眼的产生,保证涂布质量,而流延布涂布在国内技术还未成熟,国内主要采用的是传统辊式涂布.  条码机常用的不干胶标签由底纸.面纸及作为两者粘合的粘胶剂三部分组成.底纸表面呈油性,对粘胶剂具有隔离作用,所以用作面纸的附着体,以便面纸能够很容易

如何判断当前浏览器是否支持html5的video标签

如何判断当前浏览器是否支持html5的video标签: html5新增了video标签,用于播放视频,功能非常的强大,但是由于当前很多浏览器还不支持,所以在使用的时候需要判断当前浏览器是否支持此标签,下面就提供一段能够实现此功能的代码,希望能够给需要的朋友带来一定的帮助. 代码如下: //检测是否支持HTML5 function checkVideo() { if(!!document.createElement('video').canPlayType){ var vidTest = docu

iframe标签用法详解(属性、透明、自适应高度)(总结)

<iframe src="http://www.jb51.net" width="200" height="500"> 脚本之家使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问脚本之家. </iframe> 在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种

表格标签的详解

表格标记 表格是有行.有列.作用:显示表格类的数据. 文字.图片.表格套表格 一个表格的结构: 图示:以下是一个两行四列的一个表格 名称 苹果 价格 6 总价 12 ? ? 语法结构: <table> <caption>表格的标题</caption> ????<tr> ????????<th></th> <th></th> <th></th> <th></th>

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video> 标签属性; src:视频的URL; poster:视频封

HTML5 Audio/Video 标签,属性,方法,事件汇总

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 <audioid="media"src="http://www.abc.com/test.mp3"controls></audio> <video> 标签属