HTML5 雜談 Video 元素的poster屬性

Hausen發表於2017-11-04
HTMLIDE

1、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

第一幀可用後

image
image

本地視訊處理是比較簡單的，如果使用第三方產商的視訊就比較蛋疼。而在視訊新增中使用第三方視訊比自己上傳視訊到伺服器較為實用方便，以使用騰訊視訊為例，直接複製騰訊視訊提供的通用程式碼貼上到自己HTML程式碼裡面就能播放。

先來看看騰訊提供的視訊通用程式碼

image
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

image
image

相關文章