小白教程
所有教程
关于
Search
172.70.131.189
172.70.131.189
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML 视频”的源代码
本页内容
上一节:
HTML_多媒体
下一节:
HTML音频
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|50]] HTML<nowiki><video></nowiki>元素用于在网页上显示视频。 <sample title="" desc="" hererun="s"> <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> 使用的视频来自于 https://www.videvo.net/ '''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>
返回至“
HTML 视频
”。
上一节:
HTML_多媒体
下一节:
HTML音频