星空网 > 软件开发 > 网页设计

HTML5视频

<video>标签用于定义视频。

案例1:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video width="300" height="300" controls="controls">
<source src='/images/loading.gif' data-original="gsd.mp4" type="video/mp4">
<source src='/images/loading.gif' data-original="gsd.ogg" type="video/ogg">
您的浏览器不支持video标签
</video>
</body>
</html>

效果图1(浏览器支持)

HTML5视频

 

效果图2(浏览器不支持)

HTML5视频

注释:
(1)controls 用于向用户显示播放、暂停和音量按钮,属性值为:controls;
(2)autoplay 用于控制视频就绪后马上播放,属性值为:autoplay;
(3)loop 用于控制视频播放完成后再次开始播放,属性值为:loop;
(4)preload 用于控制视频在页面加载时进行加载,准备播放,若已经使用“autoplay”,则忽略该属性,属性值为:preload;
(5)src 视频链接,video元素允许多个格式不同的source元素,浏览器将会使用第一个可识别的格式;
(6)可以在<video></video>之间放置文本内容,这样浏览器可以显示不支持此标签的相关信息;
(7)<video>拥有方法、属性及事件play()、pause()等,案例如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function clickA(){
var a = document.getElementById("ex_1");
if(a.paused){
a.play();
}else{
a.pause();
}
}
</script>
</head>
<body>
<video id="ex_1" width="300" height="300" controls="controls">
<source src='/images/loading.gif' data-original="gsd.mp4" type="video/mp4">
<source src='/images/loading.gif' data-original="gsd.ogg" type="video/ogg">
您的浏览器不支持video标签
</video>
<br/>
<button onclick="clickA()">播放/暂停</button>
</body>
</html>

效果图:(浏览器支持情况下)

HTML5视频






原标题:HTML5视频

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊新品获取Review还可以这样做?:https://www.ikjzd.com/articles/60018
卖家注意!别让这些FBA政策毁了你的店铺!:https://www.ikjzd.com/articles/60019
亚马逊专家解锁“A-to-z索赔”新玩法,你get到了?:https://www.ikjzd.com/articles/6002
亚马逊卖家故事:折扣设置错误引发的惨案!:https://www.ikjzd.com/articles/60020
Facebook店铺创建步骤解析:https://www.ikjzd.com/articles/60021
5月6日生效,运费又有补贴!wish平台福利不断:https://www.ikjzd.com/articles/60022
我要去沙坡头旅游景区 沙坡头景区游玩线路:https://www.vstour.cn/a/404247.html
强者之路好玩还是启航 《海贼王》手游有几款?哪款比较好玩?:https://www.vstour.cn/a/404248.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流