這篇文章主要介紹前端H5中Video的使用場景有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為白堿灘等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及白堿灘網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都做網(wǎng)站、白堿灘網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

1.原生H5 video標(biāo)簽

   
   你的瀏覽器不支持Video標(biāo)簽

2.第三方插件video.js

_this.player = videojs(
    _this.videoNode,
    {
        autoplay: true,
        bigPlayButton : false,
        controls: true,
        preload: 'auto',
        poster: poster,
        notSupportedMessage: '視頻加載失敗，請刷新再試試',
        sources: [
            {
                src: videoUrl,
                type: 'video/mp4',
            },
        ],
    },
    function onPlayerReady() {
        this.play();
    }
)

2.1 支持原生H5 video標(biāo)簽的所有配置參數(shù)，并且更加豐富的配置。

2.2 多環(huán)境兼容性

3.業(yè)務(wù)開發(fā)中的場景

目前基本表現(xiàn)良好

3.1 自動播放實(shí)現(xiàn)

3.1.1 非微信端

目前主要方法是在videojs 的onPlayerReady回調(diào)中調(diào)用play方法，以及特殊環(huán)境下需要用戶手動觸發(fā)

3.1.2 微信端

微信端（特別是ios）為了能夠?qū)崿F(xiàn)自動播放功能，目前主要通過增加微信WeixinJSBridgeReady事件回調(diào)的方式來觸發(fā)

document.addEventListener("WeixinJSBridgeReady", function () {
    this.player.play();
}, false);

4.播放過程

一次播放三次請求

請求頭信息

響應(yīng)信息

range: bytes=0-首部信息，該信息用于檢測服務(wù)端是否支持 Range 請求

Accept-Ranges 首部（并且它的值不為 “none”），那么表示該服務(wù)器支持范圍請求

Content-Length 也是有效信息，因?yàn)樗峁┝艘螺d的視頻的完整大小

Content-Range響應(yīng)首部則表示這一部分內(nèi)容在整個資源中所處的位置

range - 可以分片段請求，此時的Content-Range則返回的對應(yīng)請求區(qū)間的大小

5.其他場景

5.1 如何實(shí)現(xiàn)視頻本地預(yù)覽

視頻本地預(yù)覽的功能主要利用 URL.createObjectURL() 方法來實(shí)現(xiàn)。URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象的 URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的 URL 對象表示指定的 File 對象或 Blob 對象。

5.2 如何實(shí)現(xiàn)播放器截圖

播放器截圖功能主要利用CanvasRenderingContext2D.drawImage() API 來實(shí)現(xiàn)。Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多種方式在 Canvas 上繪制圖像。

drawImage API 的語法如下：

void ctx.drawImage(image, dx, dy); 
void ctx.drawImage(image, dx, dy, dWidth, dHeight); 
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

  
    
    
    
  
  
    
      
      
    
    截圖
    
  

5.3 如何實(shí)現(xiàn) Canvas 播放視頻

使用 Canvas 播放視頻主要是利用 ctx.drawImage(video, x, y, width, height) 來對視頻當(dāng)前幀的圖像進(jìn)行繪制，其中 video 參數(shù)就是頁面中的 video 對象。所以如果我們按照特定的頻率不斷獲取 video 當(dāng)前畫面，并渲染到 Canvas 畫布上，就可以實(shí)現(xiàn)使用 Canvas 播放視頻的功能。

  
    
    
    
  
  
    
      
      
    
    
    

      播放
      暫停
    
    
  

以上是“前端H5中Video的使用場景有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：前端H5中Video的使用場景有哪些-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://weahome.cn/article/pigod.html