ホームページ > 記事 > ウェブフロントエンド > HTML5のVideoタグの詳しい説明

HTML5のVideoタグの詳しい説明

黄舟オリジナル: 2017-05-19 17:24:494470ブラウズ

前回の記事「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タグの詳しい説明

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. H5 video标签只能放声音不能放视频的解决办法

4. 分享一个video标签无法播放mp4的问题以及解决方案

5. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Xiaoqiang の HTML5 モバイル開発への道 (13) - HTML5 のグローバル属性次の記事：Xiaoqiang の HTML5 モバイル開発への道 (13) - HTML5 のグローバル属性

続きを見る

HTML5のVideoタグの詳しい説明

関連記事