1.音频（audio）
HTML5新出的“元素让网页播放音乐变得超简单！不需要什么插件，直接带歌名就能放出声音来。不仅如此，它还有很多好玩的API接口，就好像给页面加装了电池，只要用JavaScript就能操控音频，想怎么玩儿就怎么玩儿，比如开始放歌、暂停、调音量什么的。
要把声音加到网页里头，得先确保你那个歌是正版的，且连的对！咱就直接在HTML代码里插个`<>标签，再填上一个`src`属性，这这儿就是你音频文件的链接了哈。千万别漏了加个`controls`属性，这样子，网页上就能出现基本的音乐控制面板，有播放、暂停等等，当然还有调音量跟进度的小玩意儿。还想更有意思？那就试试用JavaScript来控制播放和暂停，保证你会有新滋味儿~
2.视频（video）
和音频一样牛逼的是，HTML5的“都可以让我们在网页上轻易地装视频了！不需要那些烦人的插件，就这几个按钮就能搞定，简单又方便，还能让网页加载起来飞快有力！
想在网页上加个视频？那就在HTML代码里找””这个符号，把视频链接和其他数据塞进去就完事儿了。跟玩儿似的简单，这回你甚至还能让视频自己开播！嫌这样还不行？再去”Controls”属性那儿点一下，立马弹出视频控制面板。看电影，暂停，全屏啥的都超轻松！
3.视频文件控制
网页加载完后，我们就得用Javascript搞定视频控制了哟。怎么弄？先在网页里找到那个视频元素，抓住它你就能随意调整视频播发了，进度条，时间啊啥的都没问题。
聊聊看视频这事情，怎么可能少了JavaScript的事件检测器跟方法呼叫！例如，当你点击播放按钮时，我们的代码便会立刻把“点我”的指令搞定；再比如，视频播完后能否自动跳转到下一个环节？回答是肯定的！其实，这种操作功能涉及到了网页布局跟用户感知，我们要保证不仅有实用性，而且还不能让人感到头疼难以理解。瞧好了，咱们可不能因为技术问题而影响看视频的乐趣！
var myVideo=document.getElementById("video");
var btn=document.getElementById("button");
btn[0].click=function(){
myVideo.muted=true;(是否静音：是)
}
btn[1].click=function(){
myVideo.muted=true;(是否静音：否)
}
btn[2].click=function(){
myVideo.play();(播放)
}
btn[3].click=function(){
myVideo.pause();(停止播放)
}
btn[4].click=function(){
myVideo.webkitrequestFullscreen();(全屏显示)
}
4.设置进度条和视频播放时长
要看看视频下得怎么样？上网页有个进度条就行了！先瞅瞅视频到底多长，然后设定进度条搞定。接着指出当前看到哪个位置（currentTime），设置其数值与之对齐，进度条就会跟随你的观影时间而生长咯~
想让视频进度条跟视频播放在同一线上？就像看电影时刚开始那种感觉？等网页加载完毕，你可以设个计时器（setInterval）来定时检查视频进度。每个1秒钟，进度条上的数字和显示的东西就会被恰如其分地更新！
5.使用表单元素range属性控制视频音量大小
你是不是也有时候想把声音变大或者变小？现在在网上就能搞定！就像玩儿滑块一样，简单得很就能调整声音的大小。
简单来说，这个滑竿主要是用来调节声音大小，也就是音量。不过别忘了看清楚免得一不小心把声音调成了静音模式~如果真是如此不幸的话，那就按住那个按钮让声音重新响起！
最终实现代码如下所示：
html
我的视频就在#myVideo那里，找到了吗？
把鼠标放到“类型为'range'的输入框”上，然后按空格。
音量调节，轻松搞定！只需给定数值即可。
video.volume = value / 100;
if (video.muted){
var ran=document.getElementById("range");
video.muted = false;
}
}
评论0