HTML5 杂谈 Video 元素的poster属性

一、poster 属性

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

若是没有设置video的poster 那么在第一帧可用以前（能够简单理解为视频加载和解析完成以前）不会在video元素上显示任何图像（webkit浏览器显示为video的背景颜色，IE系列会多一个loading），以后会以视频第一帧做为海报

<video id="video1" poster="img/500m.jpg" width="425" height="240" controls>
    <source type="video/mp4" src="mp4/500m.mp4">
</video>

<video id="video2" controls width="425" height="240" >
    <source type="video/mp4" src="mp4/500m.mp4">
</video>复制代码

显示效果为

第一帧可用前

image

第一帧可用后

image

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

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

image

<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=g0566otc4fy&tiny=0&auto=0" allowfullscreen>
</iframe>复制代码

这段代码可以获取到：

• width 视频的宽度
• height 视频高度
• tiny 是否最小化（没什么卵用）
• auto 是否自动播放

除此以外别无其余。

嵌入这段代码后查看页面的代码，能够看到iframe里面的视频用的也是video，也有一个海报图，可是能不能经过传参数来改变视频的海报图呢？对于咱们引用者来讲无从得知（讲道理你引用的是别人的视频，产商是不会提供接口给你改视频的海报）。也没法在iframe外部经过脚本改里面的元素，只能尝试在iframe外部伪造一个海报

1）、首先让视频自动播放

<iframe class="player" frameborder="0" src="https://v.qq.com/iframe/player.html?vid=g0566otc4fy&tiny=0" ></iframe>复制代码

2)、添加海报和播放图标并叠在视频区域上面，未播放时视频隐藏（不添加iframe节点）

<div class="videoBox">
    <img class="poster" src="img/500m.jpg">

    <img class="playIcon" src="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)、点击播放图标时显示并播放视频，隐藏海报

<script type="text/javascript">
    $(function(){
        var videoBox = $('.videoBox');
        var play = $('.playIcon');
        var player = $('<iframe class="player" frameborder="0" src="https://v.qq.com/iframe/player.html?vid=g0566otc4fy&tiny=0" ></iframe>');


        play.on('click',function() {
            videoBox.append(player);

            player.on('load',function(){
                player.show();
            })
        });
    });
</script>复制代码

作到这一步就能在PC端达到以假乱真的状态。

在PC端是没有问题的主流浏览器都能兼容，可是在移动端上有个兼容的问题，就是没法自动播放

即便咱们去掉了通用代码中的参数auto，在手机端上视频也是没法自动播放的，具体缘由跟音频在手机端没法自动播放的缘由同样。

当咱们点击咱们本身建立的图层上的播放图标，海报隐藏显示视频播放器，此时视频还不能播放，须要再一次点击iframe里面的视频才能播放，并且先后有两张海报。这样就会显得咱们自定义添加的海报不少余，同时还增长了播放的复杂度。

一样引用别人的视频咱们是没法在前端更改脚本作到自动播放的，可是本身本地的视频在微信能够自动播放，跟微信上播放音乐同样调用微信jssdk处理便可

image

image