Multi-Media
1. Audio playback: use of audio tags:
a) Attributes:
autoplay If this property appears, the audio is played as soon as it is ready.
controls If this property appears, the control, such as a play button, is displayed to the user.
loop If this property appears, restart play whenever the audio ends.
preload If this property appears, the audio is loaded when the page loads and ready to play.
If "autoplay" is used, this property is ignored.
URL of the audio to play by src.
b) Example: Play audio
<audio src="../mp3/See.mp3" controls autoplay></audio>
- video playback: use of video Tags
a) Attributes:
autoplay If this property appears, the video will play as soon as it is ready.
controls If this property appears, the control, such as a play button, is displayed to the user.
pixels Sets the height of the video player.
loop If this property appears, the play starts again when the media file has finished playing.
preload If this property appears, the video loads when the page loads and is ready to play.
If "autoplay" is used, this property is ignored.
URL of the video to play by src.
width pixels Sets the width of the video player.
b) Video playback
<video src="../mp3/561902ae6ac6e6649.mp4" controls></video>
Multi-Media: http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
- Common methods: load() load, play() play, pause() pause
Jq does not provide a way to control video playback, which means that if you want to operate video playback, you must use the native js method, the dom element - Common properties:
a) Current progress of current time video playback,
b) duration: Total time of video 100,000/60
c) paused: The status of the video playback. - Common Events:
a) oncanplay: The event is triggered when the user can start playing video/audio (audio/video).
b) ontimeupdate: Report current playback progress through this event.
c) onended: Trigger when playback is complete - Reset
Case:
Requirements:
1. The structure in the diagram does not use the controls property, and the style is added by itself.
2. Click the play button, the video will play normally, and the pause button style will change to the play style.
3. Click the Full Screen button to display the full screen.
4. Display the total video duration and playback progress
5. Click on the progress bar to jump to the corresponding progress video playback.
Code:
<!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(){
//Click button to play and pause
var video = $('video')[0];
$('.switch').click(function(){
if(video.paused) {
video.play();
}else{
video.pause();
}
/*Set label style fa-pause: pause fa-play: play*/
$(this).toggleClass("fa-play fa-pause");
});
//Full screen operation
$('.expand').click(function(){
//Competency testing
if(video.requestFullScreen){
video.requestFullScreen();
}
else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}
else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}
});
//Display duration, triggers the following event when the video file is ready to play
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));
}
/*Implements business logic during playback, triggering ontimeupdate events when a video is played*/
video.function(){
/*1.Get the current playing time*/
var current=video.currentTime;
$(".currentTime").html(getTime(current));
/*Set the current playback progress bar style to 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>
Style code:
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;/* Notice the path, this is 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/load.gif') 0 0 no-repeat; /* Note the path, this is 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;
}
This is an individual learning record