HTML 视频

HTML<video>元素用于在网页上显示视频。

示例

<video width="320" height="240" controls>
  <source src="/third/demo/sample.mp4" type="video/mp4">
  <source src="/third/demo/sample.ogg" type="video/ogg">
您的浏览器不支持video标签.
</video>

使用的视频来自于 https://www.videvo.net/

controls属性添加了视频控件，例如播放、暂停和音量。始终包含width和height属性是个好习惯。如果未设置高度和宽度，则在加载视频时页面可能会闪烁。

<source>元素允许您指定浏览器可以选择的替代视频文件。浏览器将使用第一个识别的格式。

<video>和标签之间的文本</video>只会在不支持该<video>元素的浏览器中显示。

自动播放

要自动启动视频，请使用以下autoplay属性

示例

<video width="320" height="240" autoplay>
  <source src="/third/demo/sample.mp4" type="video/mp4">
  <source src="/third/demo/sample.ogg" type="video/ogg">

您的浏览器不支持视频标签。</video>

在大多数情况下，Chromium 浏览器不允许自动播放。但是，始终允许静音自动播放。添加muted属性即可。

示例

<video width="320" height="240" autoplay muted>
<source src="/third/demo/sample.mp4" type="video/mp4">
  <source src="/third/demo/sample.ogg" type="video/ogg">

您的浏览器不支持视频标签。</video>

媒体类型

文件格式	Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

方法、属性和事件

HTML <video> DOM 定义了元素的方法、属性和事件。

这允许您加载、播放和暂停视频，以及设置持续时间和音量。

还有一些 DOM 事件可以在视频开始播放、暂停等时通知您。

示例

<!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="/third/demo/sample.mp4" type="video/mp4">
  <source src="/third/demo/sample.ogg" type="video/ogg">

您的浏览器不支持HTML视频。  </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> 


</body> 
</html>