“HTML 视频”的版本间差异
本页内容
无编辑摘要 |
无编辑摘要 |
||
第8行: | 第8行: | ||
</video> | </video> | ||
</sample> | </sample> | ||
使用的视频来自于 https://www.videvo.net/ | |||
'''controls'''属性添加了视频控件,例如播放、暂停和音量。始终包含width和height属性是个好习惯。如果未设置高度和宽度,则在加载视频时页面可能会闪烁。 | '''controls'''属性添加了视频控件,例如播放、暂停和音量。始终包含width和height属性是个好习惯。如果未设置高度和宽度,则在加载视频时页面可能会闪烁。 |
2022年8月15日 (一) 21:00的最新版本
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>