HTML5杂谈Video元素的poster属性

1、poster 属性

poster是用于设置视频的海报&＃xff0c;也就是视频没有播放的情况下的首图。对应的属性值为图片的URL

如果没有设置video的poster 那么在第一帧可用之前&＃xff08;可以简单理解为视频加载和解析完成之前&＃xff09;不会在video元素上显示任何图像&＃xff08;webkit浏览器显示为video的背景颜色&＃xff0c;IE系列会多一个loading&＃xff09;&＃xff0c;之后会以视频第一帧作为海报

<video id&＃61;"video1" poster&＃61;"img/500m.jpg" width&＃61;"425" height&＃61;"240" controls><source type&＃61;"video/mp4" src&＃61;"mp4/500m.mp4"> video><video id&＃61;"video2" controls width&＃61;"425" height&＃61;"240" ><source type&＃61;"video/mp4" src&＃61;"mp4/500m.mp4"> video>

显示效果为

第一帧可用前

image

第一帧可用后

image

本地视频处理是比较简单的&＃xff0c;如果使用第三方产商的视频就比较蛋疼。而在视频添加中使用第三方视频比自己上传视频到服务器较为实用方便&＃xff0c;以使用腾讯视频为例&＃xff0c;直接复制腾讯视频提供的通用代码粘贴到自己HTML代码里面就能播放。

先来看看腾讯提供的视频通用代码

image

<iframe frameborder&＃61;"0" width&＃61;"640" height&＃61;"498" src&＃61;"https://v.qq.com/iframe/player.html?vid&＃61;g0566otc4fy&tiny&＃61;0&auto&＃61;0" allowfullscreen> iframe>

这段代码能够获取到&＃xff1a;

width 视频的宽度
height 视频高度
tiny 是否最小化&＃xff08;没什么卵用&＃xff09;
auto 是否自动播放

除此之外别无其他。

嵌入这段代码后查看页面的代码&＃xff0c;可以看到iframe里面的视频用的也是video&＃xff0c;也有一个海报图&＃xff0c;但是能不能通过传参数来改变视频的海报图呢&＃xff1f;对于我们引用者来说无从得知&＃xff08;讲道理你引用的是别人的视频&＃xff0c;产商是不会提供接口给你改视频的海报&＃xff09;。也无法在iframe外部通过脚本改里面的元素&＃xff0c;只能尝试在iframe外部伪造一个海报

1&＃xff09;、首先让视频自动播放

<iframe class&＃61;"player" frameborder&＃61;"0" src&＃61;"https://v.qq.com/iframe/player.html?vid&＃61;g0566otc4fy&tiny&＃61;0" >iframe>

2)、添加海报和播放图标并叠在视频区域上面&＃xff0c;未播放时视频隐藏&＃xff08;不添加iframe节点&＃xff09;

<div class&＃61;"videoBox"><img class&＃61;"poster" src&＃61;"img/500m.jpg"><img class&＃61;"playIcon" src&＃61;"img/playIcon.svg"> div>

.videoBox{width: 300px;height: 150px;position: absolute;top:100px;left:40px;-webkit-transform: rotateZ(0deg); } .videoBox .player{display: none;position: absolute;width: 300px;height: 150px;top: 0px;left: 0px;z-index: 3; }.videoBox .poster{width: 100%;height: 100%;position: absolute;z-index: 1; }.videoBox .playIcon {width: 23%;opacity: .8;position: absolute;z-index: 2;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); }

3)、点击播放图标时显示并播放视频&＃xff0c;隐藏海报

"text/Javascript">$(function(){var videoBox &＃61; $(&＃39;.videoBox&＃39;);var play &＃61; $(&＃39;.playIcon&＃39;);var player &＃61; $(&＃39;&＃39;);play.on(&＃39;click&＃39;,function() {videoBox.append(player);player.on(&＃39;load&＃39;,function(){player.show();})});}); script>