這篇文章主要介紹了前端H5 Video常見的使用場景，幫助大家更好的進行前端開發(fā)，感興趣的朋友可以了解下
1.原生H5 video標(biāo)簽
<video id="mse" autoplay=true playsinline controls="controls">
<source src="實機視頻地址" 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: '視頻加載失敗，請刷新再試試',
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ā)中的場景
目前基本表現(xiàn)良好
3.1 自動播放實現(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 也是有效信息，因為它提供了要下載的視頻的完整大小
Content-Range 響應(yīng)首部則表示這一部分內(nèi)容在整個資源中所處的位置
range - 可以分片段請求，此時的Content-Range則返回的對應(yīng)請求區(qū)間的大小
5.其他場景
5.1 如何實現(xiàn)視頻本地預(yù)覽
視頻本地預(yù)覽的功能主要利用 URL.createObjectURL() 方法來實現(xiàn)。URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString，其中包含一個表示參數(shù)中給出的對象的 URL。這個 URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個新的 URL 對象表示指定的 File 對象或 Blob 對象。
<!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 如何實現(xiàn)播放器截圖
播放器截圖功能主要利用 CanvasRenderingContext2D.drawImage() API 來實現(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);
<!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">
<!-- 請?zhí)鎿Q為實際視頻地址 -->
<source src="請?zhí)鎿Q為實際視頻地址" />
</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 如何實現(xiàn) Canvas 播放視頻
使用 Canvas 播放視頻主要是利用 ctx.drawImage(video, x, y, width, height) 來對視頻當(dāng)前幀的圖像進行繪制，其中 video 參數(shù)就是頁面中的 video 對象。所以如果我們按照特定的頻率不斷獲取 video 當(dāng)前畫面，并渲染到 Canvas 畫布上，就可以實現(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;">
<!-- 請?zhí)鎿Q為實際視頻地址 -->
<source src="請?zhí)鎿Q為實際視頻地址" />
</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常見使用場景簡介的詳細(xì)內(nèi)容，更多關(guān)于前端H5 Video常見場景的資料請關(guān)注腳本之家其它相關(guān)文章！
來源：腳本之家
鏈接：https://www.jb51.net/html5/741755.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
