“HTML 视频”的版本间差异
本页内容
(创建页面,内容为“HTML<nowiki><video></nowiki>元素用于在网页上显示视频。 <sample title="" desc="" hererun="s"> <video width="320" height="240" controls> <source src="/third/demo/sample.mp4" type="video/mp4"> 您的浏览器不支持video标签. </video> </sample>”) |
无编辑摘要 |
||
第4行: | 第4行: | ||
<video width="320" height="240" controls> | <video width="320" height="240" controls> | ||
<source src="/third/demo/sample.mp4" type="video/mp4"> | <source src="/third/demo/sample.mp4" type="video/mp4"> | ||
<source src="/third/demo/sample.ogg" type="video/ogg"> | |||
您的浏览器不支持video标签. | 您的浏览器不支持video标签. | ||
</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> | </sample> |
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>