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>

尝试一下