HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Video canPlayType()メソッドとは？使い方と戻り値をわかりやすく解説

HTML DOM の Video canPlayType() メソッドは、ブラウザが指定された動画形式（MIMEタイプ）を再生できるかどうかに応じた文字列を返すメソッドです。動画再生機能を実装する際に、事前に対応状況を判定するために活用されます。

構文

以下が構文です。

videoObject.canPlayType(typeAsParameter)

引数には判定したい動画の MIME タイプ（例：'video/mp4'）を指定します。メソッドの戻り値は以下のいずれかになります。

戻り値詳細
probablyブラウザが指定された動画形式をほぼ確実にサポートしていることを示します。
maybeブラウザが指定された動画形式をサポートしている可能性がありますが、実際に再生を試みないと確定できないことを示します。
""（空文字列）ブラウザが指定された動画形式を確実にサポートしていないことを示します。

サンプルコード

それでは、Video canPlayType() メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Video-canPlayType( )</legend>
            <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
            <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
            <div id="divDisplay">
            </div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var demo = document.getElementById("demo");
    var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
    function getTrackDetails() {
        var ans = demo.canPlayType('video/mp4');
            if(ans !== ''){
                divDisplay.textContent = 'Browser supports mp4';
                demo.src = srcOfMedia;
                demo.load();
            }
            else
                divDisplay.textContent = 'Browser does not supports mp4';
    }
</script>
</body>
</html>

実行結果

「Does Browser Supports video/mp4?」ボタンをクリックする前の画面です。

HTML DOM Video canPlayType()メソッドとは？使い方と戻り値をわかりやすく解説

「Does Browser Supports video/mp4?」ボタンをクリックした後の画面です。canPlayType('video/mp4') の戻り値が空文字列以外であれば、ブラウザが mp4 形式に対応していると判断され、動画の読み込みが開始されます。

HTML DOM Video canPlayType()メソッドとは？使い方と戻り値をわかりやすく解説

  1. HTML DOM Video play()メソッドの使い方を徹底解説！動画再生をJavaScriptで制御する方法

    HTML DOM の Video play() メソッドは、現在読み込まれている動画（メディアコンテンツ）を再生するために使用されるメソッドです。逆に、再生中の動画を停止したい場合は pause() メソッドを使用します。この2つのメソッドを組み合わせることで、JavaScript から動画プレイヤーの再生・一時停止を自由に制御できます。 構文 play() メソッドの基本的な構文は以下の通りです。 videoObject.play() なお、play() メソッドは Promise オブジェクトを返します。そのため、.then() や .catch() を使うことで、再生が正常に開始された

  2. HTML DOM Video load()メソッドの使い方を解説！動画の再読み込み方法とサンプルコード

    HTML DOMのVideo load()メソッドは、src属性などの特定の属性がユーザーやスクリプトによって更新された後に、その変更内容を反映させるためにvideo要素を再読み込み（再レンダリング）するために使用されます。 構文 load()メソッドの構文は以下の通りです。 videoObject.load() このメソッドは引数を受け取らず、戻り値も返しません。load()が呼び出されると、メディア要素がリセットされ、選択されているリソースが最初から再び読み込まれます。そのため、再生速度や再生位置などの設定を変更した場合でも、load()を実行することで確実に新しい状態へ反映させることがで