近几年网上用得最多的就是音频和视频了，这都归功于网络科技的进步。有个新的网页标准叫做HTML5，它能让我们在网页上放很多不同类型的多媒体元素，比如音频啊、视频啊什么的。下面我就告诉你怎么用HTML5来控制这些音频和视频，包括怎么设置它们的属性和触发它们的事件，还有怎么用JavaScript做自己的播放器。
1.audio和video元素介绍
HTML5里，用〈audio〉和〈video〉可以搞定音频和视频！它们俩有很多相同的功能，能让你随心所欲地控制和播放。比如，把媒体文件的链接放到`src`里面，点个`controls`就能看到播放器了。再比如说，用`autoplay`可以开播，`loop`就可以重复播放。
2.preload属性的作用
好，我们聊聊preload属性。这个家伙就是告诉浏览器，在页面加载时需不需要提前载入音频或者视频文件。常见的取值有`none`、`metadata`和`auto`。`none`就是说别急着加载了，`metadata`意思就是挂个名，先把媒体文件的信息拿过来，`auto`就看浏览器心情，它想怎么做就怎么做。不过要提醒你，浏览器可能会无视这个属性，具体表现得看浏览器的脾气。
3.控制播放的属性和方法
在JavaScript里，操控音频和视频不用愁，只要掌握好它们的大部分属性和方法就行了。比如，用‘paused’这个属性就能知道播放器是不是停着呢；利用‘currentTime’能知道现在播到哪儿了；‘play()’就是让它开始播；‘pause()’则是让它暂时停止等等。学会运用这些技巧，我们就可以随心所欲地掌控媒体文件！
4.媒体文件的事件监听
HTML5除了原本的属性和方法，还有一堆有趣的事件让你随时知道媒体文件在干嘛！比如，当媒体文件准备好要开始播的时候，会有个`canplay`事件告诉你；当播放进度发生变化的时候，`timeupdate`事件也会来敲门；等到播放完了，就轮到`ended`事件出场了。通过关注它们，你就能了解媒体文件的播放进度并做出相应的动作。
5.自定义播放控件
咱们不只是用浏览器自带的播放器，还能用Javascript和CSS自己弄个好玩的播放器！比如把那个大头播放按钮和进度条换成可爱的字体图标，再给它们加上合适的样式和听听它会有什么反应，就能搞定控制了！当然，要是你还有啥特别需求，比如想看全屏电影、调整播放速度之类的，也可以轻松搞定！
视频播放器figcaption>
6.全屏播放的实现
记得，我们可以用HTML5的’requestFullscreen()’方法让你的视频全屏看起来更赞！键盘或者按钮轻轻一点就能触发全屏，让你的观影体验更上一层楼！
7.时间格式的转换
咱们要把以毫秒计的时间换成大家能看懂的时分秒格式来看视频播放时间。想做到这点，只需要写个小函数就能搞定了。首先把总的播放时长和现在已经放了多久都变成时分秒格式，然后显示出来就行。这样用户就能清楚知道到底播了多长时间了。
.player { width: 720px; height: 360px; margin: 0 auto; background: #000 url(../images/loading.gif) center/300px no-repeat; position: relative;}
video { display: none; height: 100%; margin: 0 auto;
8.点击进度条进行跳转播放
除了用播放器控制进度，你还能通过点进度条来快进！只要捕获鼠标点击的瞬间，算出那个位置离整个视频的时间，就能准确定位到你想看哪段了。然后把`currentTime`这个属性调一下，就这么简单完成跳播了。这下子，你可以随心所欲地跳到任何地方开始看。
var video = document.querySelector("video");var isPlay = document.querySelector(".switch");var expand = document.querySelector(".expand");var progress = document.querySelector(".progress");var loaded = document.querySelector(".progress > .loaded");var currPlayTime = document.querySelector(".timer > .current");var totalTime = document.querySelector(".timer > .total");
9.全局API的使用
光是音频和视频元素的特性和玩法，HTML5就已经让人眼花缭乱！不过，它还有更多牛逼的地方，比如有个名叫`webkitRequestFullScreen()`的大招，能把屏幕全占满，想结束这个酷炫的画面只需要轻轻一点`document.exitFullscreen()`就行了。这样大家就能随心所欲地控制播放界面的出现和消失，享受更棒的使用体验！
//当视频可播放的时候video.oncanplay = function(){ //显示视频
this.style.display = "block"; //显示视频总时长
totalTime.innerHTML = getFormatTime(this.duration);
};
10.结语
看完这篇文章后，你应该知道怎么用HTML5来操控音视频！在实战中，我们根据需求选好属性方法，轻松调控播放，还能用自制播放器、全屏播放这些招式来改善体验。希望这篇文章能帮到你，如果还有啥疑问或建议，随时提出来，咱们一起聊聊HTML5多媒体元素的妙用！
//播放按钮控制isPlay.onclick = function(){ if(video.paused) {
video.play();
} else {
video.pause();
} this.classList.toggle("fa-pause");
};
评论0