您的位置：首页 > Web前端 > HTML5

HTML5的第二天——视频，音频

2016-01-07 00:00 543 查看

摘要: 使用HTML5来运行视频和音频

HTML5的第二天，我们主要学习了视频和音频。

目前实现网页视频播放的技术 - Flash，但是

Flash并不是浏览器原生支持(第三方组件)

Flash的性能并不好

移动端不支持Flash技术

因此，就孕育出了用HTML5技术来实现视频播放效果.

在HTML文档中，要想引入视频文件，其实只需要简单几步：

用双标签<video src=”视频文件的路径”></video>
其中，可以在video开始标签中添加以下属性，来实现不同的效果
autoplay属性 - 自动播放视频
width属性 - 设置视频的宽度
height属性 - 设置视频的高度

style属性 - 设置CSS样式

class属性 - 设置CSS样式
controls属性 - 提供控制面板

loop属性 - 循环播放
poster属性 - 播放之前实现一张图片
preload属性 - 预加载视频
none - 不预加载
auto - 默认值,尽快预加载
metadata - 预加载除视频之外的内容(宽度、高度等)

视频高级编程方式

事件(video还有好几种事件)

play - 视频播放时触发

pause - 视频暂停时触发

ended - 视频播放结束时触发

error - 视频播放错误时触发

方法

play() - 用于播放视频

pause() - 用于暂停视频

load() - 用于加载视频

canPlayType() - 判断当前浏览器是否支持当前视频格式

属性

paused - 如果视频为暂停或未播放时,返回true

ended - 如果视频播放完毕时,返回true

duration - 返回当前视频的时长

currentTime - 获取或设置视频的当前位置

而音频audio的使用方法跟radio基本类似。为了更好地说明这两种效果，自己就用一个小小的案例来演示吧，这样比单纯的文字记起来快一点。

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
#btn{
font-size:18px;
background:#90C841;
border-radius:5px;
}
#adv{
position:absolute;
top:61px;
left:160px;
width:320px;
height:132px;
}
#img{
width:320px;
height:132px;
position:absolute;
top:61px;
left:160px;
display:none;
}
</style>
</head>

<body>
<!--
需求：1.一打开页面，就会有背景音乐播放
2.页面上有一个视频框，并且在视频没有打开之前，画面上有一张图片固定在页面上，并且还有一个小广告
3.点击播放或者暂停时，就会出现相应效果
4.视频的播放和暂停时通过底下的button按钮来自行控制
5.当视频结束后，显示在页面上的还是在正中间的提示图片
-->
<audio id="audio" src="DATA/S.I.N.G女团 - 灵儿想叮当.mp3" autoplay loop></audio>
<video id="video" src="DATA/oceans-clip.mp4" poster="DATA/oceans-clip.png"></video><br>
<img id="adv" src="DATA/1448466638609.jpg">
<img id="img" src="DATA/oceans-clip.png">
<input id="btn" type="button" value="播放">
<script>
var video=document.getElementById("video");
var btn=document.getElementById("btn");
var adv=document.getElementById("adv");
var img=document.getElementById("img");
//给button绑定单击事件
btn.onclick=function(){
if(video.paused){
video.play();
btn.value="暂停";
adv.style.display="none";
}else{
video.pause();
btn.value="播放";
adv.style.display="block";
}
};
video.addEventListener("ended",function(){
img.style.display="block";
});
</script>
</body>
</html>

完整的代码如上，也许就是这么一个小小的案例就可以轻松搞定在HTML5中的视频和音频效果
接下来，我们便开始了canvas的学习，而关于canvas的总结也只有等我们学完之后才来总结了，就先奉上学的这点吧……

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5 视频音频

相关文章推荐

新的分享

章节导航