上一节:
下一节:

  HTML 视频

  • HTML视频示例

    下面是一个HTML视频的示例： 
    <!DOCTYPE html> 
        <html> 
        <body> 

        <video width="400" controls>
          <source src="/images/video/demo.mp4" type="video/mp4">
          <source src="/images/video/demo.ogg" type="video/ogg">
          您的浏览器不支持HTML video。
        </video>

         
        </body> 
        </html>
    尝试一下

  • 浏览器支持

    在HTML5之前，视频只能在带插件的浏览器中播放（flash）。 HTML5<video>元素指定了在网页中嵌入视频的标准方法。
    下表是支持<video>元素的浏览器详情：
    Internet Explorer Chrome FireFox Safari Opera
    9.0（包含）以上支持 4.0（包含）以上支持 3.5（包含）以上支持 4.0（包含）以上支持 10.5（包含）以上支持

  • HTML <video>元素说明

    要以HTML格式显示视频，请像以下这样使用<video>元素： 
    <!DOCTYPE html> 
        <html> 
        <body> 

        <video width="400" height="240" controls>
          <source src="/images/video/demo.mp4" type="video/mp4">
          <source src="/images/video/demo.ogg" type="video/ogg">
          您的浏览器不支持HTML video。
        </video>

         
        </body> 
        </html>
    说明：
    • controls属性添加视频控件，如播放，暂停和音量。
    • 始终包含width和height属性是个好主意。如果未设置高度和宽度，则视频加载时页面可能会闪烁。
    • <source>元素允许您指定浏览器可以选择的备用视频文件。浏览器将使用第一种识别的格式。
    • <video>和</video>标签之间的文本仅显示在不支持该<video>元素的浏览器中。
    自动播放请用autoplay属性： 
    <!DOCTYPE html> 
        <html> 
        <body> 

        <video width="400" height="240" autoplay>
          <source src="/images/video/demo.mp4" type="video/mp4">
          <source src="/images/video/demo.ogg" type="video/ogg">
          您的浏览器不支持HTML video。
        </video>

         
        </body> 
        </html>
    尝试一下
    autoplay属性在iPad和iPhone等移动设备中不起作用。

  • HTML视频 | 浏览器支持

    在HTML5中，有3种支持的视频格式：MP4，WebM和Ogg。浏览器对不同格式的支持是：
    浏览器 MP4 WebM Ogg
    支持 不支持 不支持
    支持 支持 支持
    支持 支持 支持
    支持 不支持 不支持
    支持（从Opera25开始） 支持 支持

  • HTML视频｜媒体类型

    在HTML5中，视频有三种媒体类型：
    文件格式 媒体类型
    MP4 video/mp4
    WebM video/webm
    Ogg video/ogg

  • HTML视频 | 方法，属性和事件

    HTML5定义了<video>元素的DOM方法，属性和事件。 这允许您加载，播放和暂停视频，以及设置持续时间和音量。 还有一些DOM事件可以在视频开始播放，暂停等时通知您。 以下示例展示了JS控制video： 
    <!DOCTYPE html> 
      <html> 
      <body> 

      <div style="text-align:center"> 
        <button onclick="playPause()">播放/暂停</button> 
        <button onclick="makeBig()">变大</button>
        <button onclick="makeSmall()">变小</button>
        <button onclick="makeNormal()">正常</button>
        <br><br>
        <video id="video1" width="420">
          <source src="/images/video/demo.mp4" type="video/mp4">
          <source src="/images/video/demo.ogg" type="video/ogg">
          您的浏览器不支持 HTML5 视频.
        </video>
      </div> 

      <script> 
        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> 
      <p>视频来自抖音。</p>
      </body> 
      </html>
    尝试一下
上一节:
下一节: