当前第2页 返回上一页
例中简单的方法,向我们演示了如何使用 元素,读取并设置属性,以及如何调用方法。
1 2 3 4 5 6 7 8 9 10 11 12 | <!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 >
< video id = "video1" width = "420" >
< source src = "/statics/demosource/mov_bbb.mp4" type = "video/mp4" >
< source src = "/statics/demosource/mov_bbb.ogg" type = "video/ogg" >
|
您的浏览器不支持 HTML5 video 标签。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | </ 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 >
|
HTML5 Video 标签
<video>定义一个视频
<source>定义多种媒体资源,比如<video>和<audio>
<track>定义在媒体播放器文本轨迹
HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频,您所有需要的是:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html>
< html >
< head >
< title >PHP中文网</ title >
</ head >
< body >
< video width = "320" height = "240" controls>
< source src = "/statics/demosource/movie.mp4" type = "video/mp4" >
< source src = "/statics/demosource/movie.ogg" type = "video/ogg" >
|
您的浏览器不支持 HTML5 video 标签。
</video>
</body>
</html>
元素提供了 播放、暂停和音量控件来控制视频。
同时 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
【相关推荐】
html的基础元素,让你零基础学习HTML
HTML5使用Video 元素
以上就是HTML5中的视频代码详解的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
HTML5中的视频代码详解
更多相关阅读请进入《HTML5中的视频代码详解》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5中的视频代码详解