オーディオおよびビデオ機能を含むフロントエンド プロジェクトを開発する場合、多くの場合、Web コンポーネントを通じてオーディオ ファイルやビデオ ファイルを再生する必要があります。ただし、一部のユニバーサル プレーヤーとは異なり、多くのオーディオおよびビデオのパッケージ形式およびエンコード形式はブラウザーでサポートされていません。したがって、ビデオを再生する前に、ブラウザが対応するエンコード形式をサポートしているかどうかを確認する必要があります。現在のブラウザが特定のエンコード形式に対応しているかどうかをjsスクリプトで確認する方法を紹介します。
検査方法を紹介する前に、まず一般的に使用されるエンコード形式を紹介します。
H264 エンコード形式
H.264 はビデオ圧縮コーディング規格であり、Advanced Videocoding (AVC) としても知られています。H.264 ベースライン、H264 メイン、および H.264 高は、H.264 エンコーディングの 3 つの異なるプロファイルです。
H.264 ベースライン プロファイルは、エンコードの複雑さの軽減とビデオ品質の要件の緩和に向けて配置されています。通常、低パフォーマンスのデバイス、低帯域幅のネットワーク、またはデバイスの高い電力消費を必要とするシナリオに使用されます。他のプロファイルと比較して、コーディング効率と機能が低くなります。
H.264 メイン プロファイルは、より優れた圧縮効率とより高いビデオ品質を提供し、ほとんどのアプリケーション シナリオに適しています。エンコード効率とビデオ品質のバランスが取れており、適度なコンピューティング能力を持つデバイスで高品質のビデオのエンコードとデコードが可能になります。
H.264 High プロファイルは、最高のエンコード効率とビデオ品質を提供し、高解像度ビデオや Blu-ray ディスクなど、非常に高いビデオ品質要件があるシナリオに適しています。ただし、エンコードおよびデコード中には、より多くの計算リソースが必要になります。
H.264 Baseline の対応するエンコード番号は codecs="avc1.42E01E"
H.264 Main の対応するエンコード番号は codecs="avc1.4D401E"
H.264 High の対応するエンコード番号は codecs="avc1.64001E" 」
H265 エンコーディング (HEVC)
HEVC (高効率ビデオ コーディング) は、H.265 としても知られるビデオ圧縮コーディング規格です。HEVC Main と HEVC Main 10 は、HEVC エンコードにおける 2 つの異なるプロファイルであり、異なるエンコード機能を表します。
HEVC メイン構成ファイルは、HEVC エンコードの最も基本的な構成ファイルであり、最も一般的に使用される構成ファイルの 1 つです。高いエンコード効率とビデオ品質を提供し、ほとんどのアプリケーション シナリオに適しています。HEVC メイン プロファイルは 8 ビットの色深度 (サンプルあたり 8 ビット) をサポートし、ほとんどの一般的なビデオの再生および送信で優れたパフォーマンスを提供します。
HEVC Main 10 プロファイルは、より高い色深度のサポート、つまりサンプルあたり 10 ビットを提供します。HEVC Main プロファイルの 8 ビットの色深度と比較して、HEVC Main 10 はより繊細でリアルな色パフォーマンスを提供でき、ハイ ダイナミック レンジ (HDR) やワイド カラーなど、より高いレベルの画像の詳細が必要なシーンに特に適しています。色域ビデオ。
hevc main に対応するエンコード番号は codecs="hev1.1.6.L93.B0" です。
hevc main 10 に対応するエンコード番号は codecs="hev1.2.4.L120.B0" です。
その他のエンコード形式の情報については、以下のリンクを参照してください
https://cconcolato.github.io/media-mime-support/
現在のブラウザが特定のエンコード形式をサポートできるかどうかだけを確認したい場合は、video タグを作成し、canPlayType インターフェイスを通じてエンコードが再生できるかどうかを確認できます。maybe または might が返された場合は、再生できることを意味します。対応する実装は次のとおりです。
//判断是否支持对应的编码格式
function isVideoDecodeHardwareAccelerated() {
// 检查是否支持 WebGPU
if (!navigator.gpu) {
return false;
}
const video = document.createElement('video');
// 尝试播放带有特定编解码器的视频
const canPlayTypeResult = video.canPlayType('video/mp4; codecs="avc1.42E01E"');
// 检查结果来判断是否支持
if (canPlayTypeResult === 'probably' || canPlayTypeResult === 'maybe') {
return true;
}
return false;
}
プレーヤーが特定のパラメーター (解像度、コード レート、フレーム レート、エンコード方法) でビデオを再生できるかどうかをさらに判断したい場合は、navigator.mediaCapabilities.decodingInfo インターフェイスを呼び出して確認し、対応する戻り値を判断することで確認できます。ブラウザのサポート。以下では、一般的なビデオ形式を例とともに調べました。
async function getVideoAccelerationInformation() {
const formats = [
{
type: 'file', video: {
contentType: 'video/mp4; codecs="avc1.42E01E"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // h264 baseline
{
type: 'file', video: {
contentType: 'video/mp4; codecs="avc1.4D401E"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // h264 main
{
type: 'file', video: {
contentType: 'video/mp4; codecs="avc1.64001E"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // h264 high
{
type: 'webrtc', video: {
contentType: 'video/vp9', width: 1920, height: 1080, bitrate: 3000, framerate: 24 }}, // vp9 profile 0
//{ type: 'webrtc', video: { contentType: 'video/vp9.2', width: 1920, height: 1080, bitrate: 3000, framerate: 24 }}, // vp9 profile 2
{
type: 'file', video: {
contentType: 'video/mp4; codecs="hev1.1.6.L93.B0"',width:1920,height:1080,bitrate: 1000,framerate:24 }}, // hevc main
{
type: 'file', video: {
contentType: 'video/mp4; codecs="hev1.2.4.L120.B0"',width:1920,height:1080,bitrate: 1000,framerate:24 }} // hevc main 10
];
const results = [];
for (const format of formats) {
//supported.supported 支持状态
//supported.smooth 平滑度
//supported.powerEfficient 功耗效率
const supported = await navigator.mediaCapabilities.decodingInfo(format);
results.push({
mimeType: format.video.contentType,
supported: supported.supported,
smooth: supported.smooth,
powerEfficient: supported.powerEfficient
});
}
return results;
}
//获取各种视频编码的加速信息
let result = getVideoAccelerationInformation();
console.log(result);
ビデオの対応するパラメータを確認してからブラウザで再生すると、ブラウザの互換性がないために発生する再生エラーの問題を回避できます。