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