“HTML 视频”的版本间差异

2022年8月15日 (一) 20:58的版本

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>

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>

@@ 第4行： / 第4行： @@
 <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>
+</sample>
+'''controls'''属性添加了视频控件，例如播放、暂停和音量。始终包含width和height属性是个好习惯。如果未设置高度和宽度，则在加载视频时页面可能会闪烁。
+<nowiki><source></nowiki>元素允许您指定浏览器可以选择的替代视频文件。浏览器将使用第一个识别的格式。
+<nowiki><video></nowiki>和标签之间的文本<nowiki></video>只会在不支持该<video></nowiki>元素的浏览器中显示。
+== 自动播放 ==
+要自动启动视频，请使用以下autoplay属性
+<sample title="" desc="" hererun="s">
+<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>
+</sample>
+<blockquote>
+在大多数情况下，Chromium 浏览器不允许自动播放。但是，始终允许静音自动播放。添加'''muted'''属性即可。
+</blockquote>
+<sample title="" desc="" hererun="s">
+<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>
+</sample>
+== 媒体类型 ==
+{|
+! 文件格式
+! Type
+|-
+| MP4
+| video/mp4
+|-
+| WebM
+| video/webm
+|-
+| Ogg
+| video/ogg
+|}
+== 方法、属性和事件 ==
+HTML <nowiki><video></nowiki> DOM 定义了元素的方法、属性和事件。
+这允许您加载、播放和暂停视频，以及设置持续时间和音量。
+还有一些 DOM 事件可以在视频开始播放、暂停等时通知您。
+<sample title="" desc="" hererun="s">
+<!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>
 </sample>