ネイティブ H5 video タグ
<video id="mse" autoplay=true playsinline controls="controls">
<source src="アドレス」タイプ="video/mp4">
ブラウザはVideoタグをサポートしていない
</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>
ネイティブH5ビデオタグのすべての設定パラメータと豊富な設定をサポートします。
複数環境との互換性
事業開発におけるシナリオ
これまでの基本的なパフォーマンスは良好
オートプレイの実装
現在、主な方法は、videojsのonPlayerReadyコールバックでplayメソッドを呼び出すことです。
document.addEventListener("JSBridgeReady", function () {
this.player.play();
}, false);
再生手順
3つのリクエストを同時に再生
リクエストヘッダ情報
対応情報
range: bytes=0- サーバーがRangeリクエストをサポートしているかどうかをチェックするためのヘッダー情報。
Accept-Rangesヘッダーは、サーバーがレンジリクエストをサポートしていることを意味します。
Content-Lengthも、ダウンロードする動画のフルサイズを提供するため、有効な情報です。
Content-Range応答ヘッダーは、リソース全体の中でのこのコンテンツの部分の位置を示します。
range - フラグメント化されたリクエストの場合、Content-Range は対応するリクエスト範囲のサイズを返します。
その他のシーン
ビデオローカルプレビューの実装方法
range: bytes=0- 動画のローカル プレビューは、主にこのメソッドを使用して実装されます。 URL.createObjectURL() 静的メソッドは、パラメータで指定されたオブジェクトを表す URL を含む DOMString を作成します。 この URL のライフタイムは、作成されたウィンドウのドキュメントにバインドされます。この新しい URL オブジェクトは、指定された File オブジェクトまたは Blob オブジェクトを表します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ローカルプレビューの例</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>
プレイヤーのスクリーンショットを実装する方法
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">
<!-- 実際のアドレスに置き換えてほしい。>
<source src="実際のアドレスに置き換えてほしい。>
</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 キャンバスを実装してビデオを再生する方法
<!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;">
<!-- 実際のアドレスに置き換えてほしい。>
<source src="実際のアドレスに置き換えてほしい。>
</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>
Canvas を使用した動画再生では、主に動画の現在のフレームのイメージを描画します。つまり、特定の頻度で動画の現在のフレームを取得し続け、それを Canvas キャンバスにレンダリングすれば、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;">
<!-- 実際のアドレスはdrawImageに置き換えられる。>
<source src="実際のアドレスはdrawImageに置き換えられる。>
</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>
