上一节:
下一节:

  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属性添加视频控件,如播放,暂停和音量。
    • 始终包含widthheight属性是个好主意。如果未设置高度和宽度,则视频加载时页面可能会闪烁。
    • <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>
    
    
    尝试一下
上一节:
下一节: