H5媒体标签，属性及案例

多媒体
1.音频播放：audio标签的使用:
a) 属性：
autoplay 如果出现该属性，则音频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则每当音频结束时重新开始播放。
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src 要播放的音频的 URL。
b) 示例:播放音频

<audio src="../mp3/See.mp3" controls autoplay></audio>

视频播放：video标签的使用
a) 属性：
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
pixels 设置视频播放器的高度。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
b) 视频播放

<video src="../mp3/561902ae6ac6e6649.mp4" controls></video>

多媒体：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

常用方法：load() 加载、 play() 播放、 pause() 暂停
Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素
常用属性：
a) currentTime 视频播放的当前进度、
b) duration:视频的总时间 100000/60
c) paused:视频播放的状态.
常用事件：
a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
b) ontimeupdate:通过该事件来报告当前的播放进度.
c) onended:播放完时触发—重置
案例：

需求：
1.图中结构不使用controls属性，样式自行添加完成。
2.点击播放按钮，视频正常播放，暂停按钮样式变为播放样式。
3.点击全屏按钮显示全屏。
4.显示视频总时长及播放进度
5.点击进度条，可跳转至对应进度视频的播放。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/css.css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<script src="js/jquery.min.js"></script>
	<script>
	$(function(){
		//点击按钮播放和暂停
		var video = $('video')[0];
		$('.switch').click(function(){
			if(video.paused) {
				video.play();
			}else{
				video.pause();		
			}
		/*设置标签的样式  fa-pause:暂停  fa-play：播放*/
		$(this).toggleClass("fa-play fa-pause");
		});
		//全屏操作
		$('.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();
            }

		});
		//显示时长,当视频文件可以播放时才触发下面的事件
	function getTime(time) {
			var hours = Math.floor(time/3600);
			hours = hours<10?"0"+hours:hours;
			var mins = Math.floor(time%3600/60);
			mins = mins<10?"0"+mins:mins;
			var seconds = Math.floor(time%60);
			seconds = seconds<10?"0"+seconds:seconds;
			var tag = hours+ ":" + mins + ":" + seconds;
			return tag;
	}

	video.function(){
		video.style.display="block";	
		var total= video.duration;
		$(".totalTime").html(getTime(total));
		
	}
	/*实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件*/
	video.function(){
 		/*1.获取当前的播放时间*/
        var current=video.currentTime;
        $(".currentTime").html(getTime(current));
        /*设置当前播放进度条样式  0.12>>0.12*100=12+%>12%*/
            var percent=current/video.duration*100+"%";
            $(".elapse").css("width",percent);
	}
	$('.bar').click(function(e){
		var offset = e.offsetX;
		var percent = offset / $(this).width();
		console.log(percent);
		var current = percent * video.duration;
		video.currentTime = current;
		percent=current/video.duration*100+"%";
        $(".elapse").css("width",percent);
	});
	video.onended = function(){
		video.currentTime = 0;
        $(".switch").removeClass("fa-pause").addClass("fa-play");
	}
});
	</script>
</head>
<body>
<div class="player">
	<video src="mp4/chrome.mp4"></video>
	<div class="controls">
		<a href="javascript:;" class="switch fa fa-play"></a>
        <a href="javascript:;" class="expand fa fa-expand"></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>
</html>

样式代码：

body {
    padding: 0;
    margin: 0;
    font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
    background-color: #F7F7F7;
}

a {
    text-decoration: none;
}
.player{
    width: 720px;
    height: 360px;
    margin: 80px auto;
    background:  url('../images/loading.gif') 0 0 no-repeat;/* 注意路径，这是css */
    background-size: cover;
    position: relative;
}
video{
    width: 100%;
    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;
}

body {
padding: 0;
margin: 0;
font-family: ‘microsoft yahei’, ‘Helvetica’, simhei, simsun, sans-serif;
background-color: #F7F7F7;
}

a {
text-decoration: none;
}
.player{
width: 720px;
height: 360px;
margin: 80px auto;
background: url(’…/images/loading.gif’) 0 0 no-repeat;/* 注意路径，这是css */
background-size: cover;
position: relative;
}
video{
width: 100%;
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;
}

本文属个人学习整理记载

H5媒体标签，属性及案例

猜你喜欢