admin管理员组文章数量:1659595
video的属性
<video
id="video"
src="http://wxsnsdy.tc.qq/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
controls = "true"
poster="https://img1.baidu/it/u=3561051001,3911111764&fm=26&fmt=auto&gp=0.jpg" // 视频封面
preload="auto"
webkit-playsinline="true" /* 这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/
playsinline="true" // IOS微信浏览器支持小窗内播放
x-webkit-airplay="allow"
x5-video-player-type="h5" // 启用H5播放器,是wechat安卓版特性
x5-video-player-fullscreen="true" // 全屏设置,设置为 true 是防止横屏
x5-video-orientation="portraint" // 播放器的方向, landscape横屏,portraint竖屏,默认值为竖屏
style="object-fit:fill">
</video>
- src:视频的地址
- controls:加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。
- poster:属性规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。如果未设置该属性,则使用视频的第一帧来代替。
- preload:属性规定在页面加载后载入视频。
- webkit-playsinline和playsinline:视频播放时局域播放,不脱离文档流 。但是这个属性比较特别, 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,如果APP不设置,你页面中加了这标签也无效,这也就是为什么安卓手机WeChat 播放视频总是全屏,因为APP不支持playsinline,而ISO的WeChat却支持。这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,IOS需要设置删除 webkit-playsinline 标签,因为你设置 false 是不支持的 ,安卓则不需要,因为默认全屏。但这时候全屏是有播放控件的,无论你有没有设置control。 做直播的可能用得着播放控件,但是全屏H5是不需要的,那么去除全屏播放时候的控件,需要以下设置:同层播放
- x-webkit-airplay="allow":这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件,也就是说通过AirPlay功能可以实现影音文件的无线播放,当然前提是播放的终端设备也要支持相应的功能
- x5-video-player-type:启用同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上,也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放,播放的时候看似全屏,但是已经除去了control和微信的导航栏,只留下"X"和"<"两键。目前的同层播放器只在Android(包括微信)上生效,暂时不支持iOS。至于为什么同层播放只对安卓开放,是因为安卓不能像ISO一样局域播放,默认的全屏会使得一些界面操作被阻拦,如果是全屏H5还好,但是做直播的话,诸如弹幕那样的功能就无法实现了,所以这时候同层播放的概念就解决了这个问题。不过在测试的过程中发现,不同版本的IOS和安卓效果略有不同
- x5-video-orientation:声明播放器支持的方向,可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,但是这个属性需要x5-video-player-type开启H5模式
- x5-video-player-fullscreen:全屏设置。它又两个属性值,ture和false,true支持全屏播放,false不支持全屏播放。其实,IOS 微信浏览器是Chrome的内核,相关的属性都支持,也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核,一些属性标签比如playsinline就不支持,所以始终全屏。
1、通过width和height设置视频窗口大小
<video src="hangge.mp4" controls width="400" height="300"></video>
2、预加载媒体文件
设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:
(1)值为auto:让浏览器自动下载整个文件
(2)值为none:让浏览器不必预先下载文件
(3)值为metadata:让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息(比如视频的总时长,第一帧图像等)
<!-- 用户点击播放才开始下载 -->
<video src="hangge.mp4" controls preload="none"></video>
3、自动播放
(1)使用autoplay属性可以让浏览器加载完视频文件后立即播放。
<video src="hangge.mp4" controls autoplay></video>
(2)如果启用自动播放,可以将播放器设置为muted状态。这样自动播放时会静音,防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。
<video src="hangge.mp4" controls autoplay muted></video>
4、循环播放
使用loop属性让视频播放结束时,再从头开始播放。
<video src="hangge.mp4" controls loop></video>
5、设置替换视频的图片(封面图片)
通过poster属性可以设置,浏览器在下面三种情况下会使用这个图片:
(1)视频第一帧未加载完毕
(2)把preload属性设置为none
(3)没有找到指定的视频文件
<video src="hangge.mp4" controls poster="hangge.png"></video>
6、浏览器兼容,如何让每一个浏览器都能顺利播放视频
现在大部分浏览器都能支持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>
版权声明:本文标题:H5中添加video视频 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729837002a1214439.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论