HTML5のVideoタグの詳しい説明-H5 チュートリアル-php.cn

HTML5のVideoタグの詳しい説明

黄舟

リリース： 2017-05-19 17:24:49

オリジナル

4526 人が閲覧しました

前回の記事「Xiaoqiang の HTML5 モバイル開発道 (5) - 美しいビデオプレーヤーを作る」で、原理についてあまり知らない友人もいます。

1. 使用スキル

HTML5 では、

<video src="move.mp4"></video>

ログイン後にコピー

には、多くの属性があります。たとえば、controls 属性は、 console があるかどうかを制御できます。

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

ログイン後にコピー

上記のビデオ形式から、ブラウザごとに異なるビデオ形式がサポートされていることがわかります。そのため、タグを使用して複数の形式のビデオを指定できます。デフォルトでは、ブラウザはファイルのダウンロードを自動的に開始します。タイプ。

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

ログイン後にコピー

E v 2、Video タグの属性

VIDEO ラベルは、HTML5 のグローバル属性とイベント属性をサポートしています。イベント属性の固有の属性は次のとおりです:

AutoPlay 自動再生この属性が表示されると、ビデオが再生されます準備完了後すぐに発送致します。 SControls コントロールこの属性が表示されると、再生ボタンなどのコントロールがユーザーに表示されます。

高さピクセルビデオプレーヤーの高さを設定します。 OLoop ループこの属性が表示されると、メディアファイルの再生後に再び再生が開始されます。

preload

この属性が表示される場合、ページの読み込み時にビデオが読み込まれ、再生の準備が整います。

「自動再生」が使用されている場合、この属性は無視されます。

src url 再生するビデオの URL。

幅ピクセルビデオプレーヤーの幅を設定します。

ほとんどのブラウザでサポートされているビデオメソッドと属性イベント

メソッドpause() currentTime 一時停止

load() videoWidth 進行状況

canPlayType videoHeight エラー

期間終了待機中

volume loadedmetadata

height

width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

三、从实例中了解Video标签的使用

<!DOCTYPE html>   
<html>   
<body>   
    <p style="text-align:center;">  
      <!--定义按钮，并添加事件监听函数-->  
      <button onclick="playPause()">播放/暂停</button>   
      <button onclick="makeBig()">大</button>  
      <button onclick="makeNormal()">中</button>  
      <button onclick="makeSmall()">小</button>  
      <br />   
      <video id="video1" width="420" style="margin-top:15px;">  
        <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
          <p>您的浏览器不支持此HTML5标签</p>  
      </video>  
    </p>   
  
    <script type="text/javascript">  
        //得到video标签对象  
        var myVideo=document.getElementById("video1");  
  
        function playPause()  
        {   
            if (myVideo.paused)   
              myVideo.play();   
            else   
              myVideo.pause();   
        }   
  
        function makeBig()  
        {   
            myVideo.width=560;   
        }   
  
        function makeSmall()  
        {   
            myVideo.width=320;   
        }   
  
        function makeNormal()  
        {   
            myVideo.width=420;   
        }   
    </script>   
  
</body>   
</html>

ログイン後にコピー

HTML5のVideoタグの詳しい説明