當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

前端H5 Video常見使用場(chǎng)景簡(jiǎn)介

 2021-01-18 17:13  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

這篇文章主要介紹了前端H5 Video常見的使用場(chǎng)景,幫助大家更好的進(jìn)行前端開發(fā),感興趣的朋友可以了解下

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

<video id="mse" autoplay=true playsinline controls="controls">
   <source src="實(shí)機(jī)視頻地址" type="video/mp4">
   你的瀏覽器不支持Video標(biāo)簽
</video>

2.第三方插件video.js

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

<video
  ref={(node) => (this.videoNode = node)}
  className="video-js vjs-big-play-centered"
  preload="auto"
  autoplay="autoplay"
  playsinline='true'
  webkit-playsinline='true'
  x5-video-player-type='h5'
  x5-video-player-fullscreen='false'
  x5-video-orientation='portraint'
></video>

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

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

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

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

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

3.1.1 非微信端

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

3.1.2 微信端

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

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

4.播放過程

一次播放三次請(qǐng)求

請(qǐng)求頭信息

響應(yīng)信息

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

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

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

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

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

5.其他場(chǎng)景

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>視頻本地預(yù)覽示例</title>
  </head>
  <body>
    <input type="file" accept="video/*" onchange="loadFile(event)" />
    <video
      id="previewContainer"
      controls
      width="480"
      height="270"
      style="display: none;"
    ></video>

    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = function () {
          const output = document.querySelector("#previewContainer");
          output.style.display = "block";
          output.src = URL.createObjectURL(new Blob([reader.result]));
        };
        reader.readAsArrayBuffer(event.target.files[0]);
      };
    </script>
  </body>
</html>

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

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

drawImage API 的語(yǔ)法如下:

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);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>播放器截圖示例</title>
  </head>
  <body>
    <video id="video" controls="controls" width="460" height="270" crossorigin="anonymous">
      <!-- 請(qǐng)?zhí)鎿Q為實(shí)際視頻地址 -->
      <source src="請(qǐng)?zhí)鎿Q為實(shí)際視頻地址" />
    </video>
    <button onclick="captureVideo()">截圖</button>
    <script>
      let video = document.querySelector("#video");
      let canvas = document.createElement("canvas");
      let img = document.createElement("img");
      img.crossOrigin = "";
      let ctx = canvas.getContext("2d");

      function captureVideo() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        img.src = canvas.toDataURL();
        document.body.append(img);
      }
    </script>
  </body>
</html>

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 Canvas 播放視頻</title>
  </head>
  <body>
    <video id="video" controls="controls" style="display: none;">
      <!-- 請(qǐng)?zhí)鎿Q為實(shí)際視頻地址 -->
      <source src="請(qǐng)?zhí)鎿Q為實(shí)際視頻地址" />
    </video>
    <canvas
      id="myCanvas"
      width="460"
      height="270"
      style="border: 1px solid blue;"
    ></canvas>
    <div>
      <button id="playBtn">播放</button>
      <button id="pauseBtn">暫停</button>
    </div>
    <script>
      const video = document.querySelector("#video");
      const canvas = document.querySelector("#myCanvas");
      const playBtn = document.querySelector("#playBtn");
      const pauseBtn = document.querySelector("#pauseBtn");
      const context = canvas.getContext("2d");
      let timerId = null;

      function draw() {
        if (video.paused || video.ended) return;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        timerId = setTimeout(draw, 0);
      }

      playBtn.addEventListener("click", () => {
        if (!video.paused) return;
        video.play();
        draw();
      });

      pauseBtn.addEventListener("click", () => {
        if (video.paused) return;
        video.pause();
        clearTimeout(timerId);
      });
    </script>
  </body>
</html>

以上就是前端H5 Video常見使用場(chǎng)景簡(jiǎn)介的詳細(xì)內(nèi)容,更多關(guān)于前端H5 Video常見場(chǎng)景的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

來(lái)源:腳本之家

鏈接:https://www.jb51.net/html5/741755.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門排行

信息推薦