HTML5--新增元素音频/视频(6)
前言：
这节课主要学习HTML5中新增的audio和video元素。
1.audio元素
作用：为html提供了播放音频文件的标准。
属性：
controls：
controls属性为audio控件提供了播放、暂停、音量调节等功能。
autoplay：
设置音频自动播放，音频在就绪后马上播放。
loop：
每当音频结束后，就重新开始播放。
muted：
规定音频的输出应该被静音。
preload：
规定视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性。
source标签：
包裹在audio元素中，可以定义多种音频格式资源。
audio对象示例：
<body> <button onclick="operation()">播放/暂停</button> <!-- 当浏览器不支持audio标签时，就会显示其中的文字 --> <audio id="audio" src="./1.mp3" controls>你的浏览器不支持此标签</audio> <script> var audio = document.getElementById('audio') function operation(){ //通过paused判断当前音频是否暂停 if (audio.paused) { //使用play()方法进行播放 audio.play() } else { //使用pause()方法进行暂停 audio.pause() } } </script> </body>
2.video元素
作用：为html提供了播放视频文件的标准。
属性：除过audio中的属性
width/height：
为video元素设置宽和高
poster：
规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
source标签：
包裹在video元素中，可以定义多种视频格式资源。
注意事项：
视频始终会保持原始的宽高比，如果同时设置宽高，并不是真正的将视频的画面设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非设置的宽高刚好就是原始的宽高比。
建议：设置宽、高时，只设置宽或者只设置高，让视频文件自动所缩放。
video对象示例：
<body> <button onclick="operation()">播放/暂停</button> <button onclick="big(this)">最大化</button> <button onclick="small(this)">最小化</button> <!-- 当浏览器不支持audio标签时，就会显示其中的文字 --> <video id="video" controls> <source src="./1.mp4"> <source src="./1.avi"> 你的浏览器不支持此标签</video> <script> var video = document.getElementById('video') // 操作video标签的播放和暂停 function operation(){ //通过paused判断当前视频是否暂停 if (video.paused) { //使用play()方法进行播放 video.play() } else { //使用pause()方法进行暂停 video.pause() } } //video标签的最大化 function big(v){ v.width = 800 v.height = 800 } //video标签的最小化 function small(v){ v.width = 300 v.height = 300 } </script> </body>
3.多媒体元素常用API
注意：jquery没有提供对多媒体播放控件的方式，如果要操作多媒体播放，必须使用原生js。
1>常用方法：load() 加载、play() 播放、pause() 暂停
2>常用属性：
i：currentTime 多媒体当前播放的进度。
ii：duration 多媒体的总时长。
iii：paused 多媒体播放的状态。
3>常用事件
i：oncanplay 事件在用户可以开始播放多媒体时触发。
ii：ontimeupdate 通过该事件来报告当前的播放进度
iii：onended 播放完时触发。
举例：手动实现多媒体，不同浏览器播放器的控制面板显示不一样，这里我们手动实现。
第一步：布局结构和样式(html，css)
播放器布局结构
<head> <meta charset="UTF-8"> <title>Title</title> <!-- 使用了字体图标 --> <link rel="stylesheet" href="../css/font-awesome.css"> <!-- 引入外部css文件 --> <link rel="stylesheet" href="../css/css.css"> </head> <body> <h3 class="playerTitle">视频播放器</h3> <div class="player"> <video src="../mp4/chrome.mp4" id="video"></video> <div class="controls" id="controls"> <a href="javascript:;" class="switch fa fa-play"></a> <a href="javascript:;" class="expand fa fa-expand" id="fullScreen"></a> <div class="progress"> <div class="bar"></div> <div class="loaded"></div> <div class="elapse"></div> </div> <div class="time"> <span class="currentTime">00:00:00</span> \ <span class="totalTime">00:00:00</span> </div> </div> </div> </body>
css样式
body { padding: 0; margin: 0; font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif; background-color: #F7F7F7; } a { text-decoration: none; } .playerTitle{ width:100%; margin: 0 auto; line-height:100px; font-size: 40px; text-align: center; } .player{ width: 720px; height: 360px; margin: 0 auto; background: url("../images/loading.gif") center no-repeat; background-size: cover; position: relative; } video{ height:100%; margin: 0 auto; display: none; } .controls { width: 720px; height: 40px; position: absolute; left: 0px; bottom: -40px; background-color: #000; } .controls > .switch{ width: 20px; height: 20px; display: block; font-size: 20px; color: #fff; position: absolute; left: 10px; top: 10px; } .controls > .expand{ width: 20px; height: 20px; display: block; font-size: 20px; color: #fff; position: absolute; right: 10px; top: 10px; } .controls > .progress{ width: 430px; height: 10px; position: absolute; left:40px; bottom:15px; background-color: #555; } .controls > .progress > .bar{ width:100%; height:100%; border-radius: 3px; cursor: pointer; position: absolute; left: 0; top: 0; opacity: 0; z-index: 999; } .controls > .progress > .loaded{ width:60%; height:100%; background-color: #999; border-radius: 3px; position: absolute; left: 0; top: 0; z-index: 2; } .controls > .progress > .elapse{ width:0%; height:100%; background-color: #fff; border-radius: 3px; position: absolute; left: 0; top: 0; z-index: 3; } .controls > .time{ height: 20px; position: absolute; left:490px; top: 10px; color: #fff; font-size: 14px; }
第二部：功能实现(JavaScript)
<script src="../js/jquery.min.js"></script>
<script>
/*通过jq来实现功能*/
$(function () {
/*1.获取播放器*/
var video = $("video")[0];
/*2.实现播放与暂停*/
$(".switch").click(function () {
/*实现播放与暂停的切换：如果是暂停>>播放 ，如果是播放 >> 暂停*/
if (video.paused) {
video.play();
/*移除暂停样式，添加播放样式*/
} else {
video.pause();
/*移除播放样式，添加暂停样式*/
}
/*设置标签的样式 fa-pause:暂停 fa-play：播放*/
$(this).toggleClass("fa-play fa-pause");
});
/*3.实现全屏操作*/
$(".expand").click(function () {
/*全屏>>不同浏览器需要添加不同的前缀>>能力测试*/
if (video.requestFullScreen) {
video.requestFullScreen();
} else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.msRequestFullScreen) {
video.msRequestFullScreen();
}
});
/*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件*/
video.oncanplay = function () {
setTimeout(function () {
/*1.将视频文件设置为显示*/
video.style.display = "block";
/*2.获取当前视频文件的总时长(以秒做为单位，同时获取了小数值)，计算出时分秒*/
var total = video.duration; //01:01:40 00:00:36
/*3.将计算结果展示在指定的dom元素中*/
$(".totalTime").html(result);
}, 2000);
}
/*通过总时长计算出时分秒*/
function getResult(time) {
var hour = Math.floor(time / 3600);
/*补0操作*/
hour = hour < 10 ? "0" + hour : hour;
var minute = Math.floor(time % 3600 / 60);
minute = minute < 10 ? "0" + minute : minute;
var second = Math.floor(time % 60);
second = second < 10 ? "0" + second : second;
/*返回结果*/
return hour + ":" + minute + ":" + second;
}
/*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件
* 如果修改currentTime值也会触发这个事件，说白了，只要currenTime值变化，就会触发这个事件*/
video.ontimeupdate = function () {
/*1.获取当前的播放时间*/
var current = video.currentTime;
/*2.计算出时分秒*/
var result = getResult(current);
/*3.将结果展示在指定的dom元素中*/
$(".currentTime").html(result);
/*4.设置当前播放进度条样式 0.12>>0.12*100=12+%>12%*/
var percent = current / video.duration * 100 + "%";
$(".elapse").css("width", percent);
}
/*6.实现视频的跳播*/
$(".bar").click(function (e) {
/*1.获取当前鼠标相对于父元素的left值--偏移值*/
var offset = e.offsetX;
/*2.计算偏移值相对总父元素总宽度的比例*/
var percent = offset / $(this).width();
/*3.计算这个位置对应的视频进度值*/
var current = percent * video.duration;
/*4.设置当前视频的currentTime*/
video.currentTime = current;
});
/*7.播放完毕之后，重置播放器的状态*/
video.onended = function () {
video.currentTime = 0;
$(".switch").removeClass("fa-pause").addClass("fa-play");
}
});
</script>
总结：我们可以选择多媒体提供的controls控制面板，也可以使用多媒体提供的API手动实现。
