H5新标签audio&video
2019-04-18 本文已影响0人
言歌不言歌
H5新标签audio&video
audio
<audio id="audio" controls autoplay loop muted >您的浏览器不支持audio标签</audio>
-
controls显示播放器页面(默认隐藏) -
autoplay自动播放 -
loop设置或返回音频/视频是否再播放结束时再次播放-
true再次播放 -
false不再次播放（默认值）
-
-
muted静音 -
currentSrc(只读) 返回当前音频/视频的URL -
duration(只读) 返回当前音频/视频的长度（以秒计） -
currentTime设置或返回音频/视频的当前播放位置（以秒计） -
volume设置或返回音频/视频的当前音量，范围0~1 -
muted设置或返回音频/视频是否静音 -
playbackRate设置或返回音频/视频的当前播放速度- 1.0（正常速度，默认值）
- 0.5 半速
- 2.0 倍速
-
ended(只读) 返回音频/视频是否播放完毕-
true播放结束 -
false播放未结束
-
-
paused(只读) 设置或返回音频/视频是否暂停-
true暂停 -
false未暂停
-
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--controls 显示播放器页面-->
<!--autoplay 自动播放-->
<!--loop 无限循环-->
<!--muted 静音-->
<audio id="audio" src="我们爱过吗只是睡过吧.mp3" controls <!--autoplay--> loop <!--muted-->>
您的浏览器不支持audio标签
</audio>
<br />
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="seek">指定时间开始播放</button>
<button id="muted">静音</button>
<button id="pp">播放/暂停</button>
</body>
<script type="text/javascript">
var audio=document.getElementById("audio");
var playBtn=document.getElementById("play");
var pauseBtn=document.getElementById("pause");
var seekBtn=document.getElementById("seek");
var mutedBtn=document.getElementById("muted");
var ppBtn=document.getElementById("pp");
playBtn.onclick=function(){
audio.play();
}
pauseBtn.onclick=function(){
audio.pause();
}
seekBtn.onclick=function(){
//调节当前时间
//audio.fastseek(5); safari支持
//使用currentTime进行时间的调节，进行音乐进度的控制
audio.currentTime=60;
}
mutedBtn.onclick=function(){
//使用volume调节声音大小，可以用来做静音按钮
audio.volume=0;
}
var playStatus=false;
ppBtn.onclick=function(){
if(playStatus==false) {
audio.play();
}else{
audio.pause();
}
playStatus=!playStatus;
}
</script>
</html>
video
<video id="video" src="许嵩、黄龄 - 惊鸿一面.mkv" width="500" controls loop poster="img/bj.jpg">
您的浏览器不支持video标签
</video>
-
controls显示播放器页面(默认隐藏) -
autoplay自动播放 -
loop无限循环 -
muted静音 -
poster规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
另一种方式，匹配视频
<video id="video" width="500" height="" controls loop poster="img/bj.jpg">
<source src="许嵩、黄龄 - 惊鸿一面.mp4" type="video/mp4"></source>
<source src="许嵩、黄龄 - 惊鸿一面.ogv" type="video/ogg"></source>
<source src="许嵩、黄龄 - 惊鸿一面.webm" type="video/webm"></source>
<source src="许嵩、黄龄 - 惊鸿一面.mkv" type="video/mkv"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<video id="video" src="许嵩、黄龄 - 惊鸿一面.mkv" width="500" controls loop poster="img/bj.jpg">
您的浏览器不支持video标签
</video>
<br />
<button id="load">重新加载</button>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="muted">静音</button>
<button id="pp">播放/暂停</button>
<button id="max">最大化</button>
</body>
<script type="text/javascript">
var video=document.getElementById("video");
var loadBtn=document.getElementById("load");
var playBtn=document.getElementById("play");
var pauseBtn=document.getElementById("pause");
var mutedBtn=document.getElementById("muted");
var ppBtn=document.getElementById("pp");
var max=document.getElementById("max");
var playStatus=false;
loadBtn.onclick=function(){
video.load();
}
playBtn.onclick=function(){
video.play();
}
pauseBtn.onclick=function(){
video.pause();
}
mutedBtn.onclick=function(){
if (playStatus==false) {
video.volume=0;
} else{
video.volume=0.5;
}
playStatus=!playStatus;
}
ppBtn.onclick=function(){
if (playStatus==false) {
video.play();
} else{
video.pause();
}
playStatus=!playStatus;
}
max.onclick=function(){
video.webkitRequestFullScreen();
}
</script>
</html>
