H5知识之多媒体操作（附召唤御姐demo）

召唤御姐演示：

文章目录

html5结构元素
Html5功能元素
- 召唤御姐的小demo (复制粘贴即可用):
Html5表单元素
- 要实现单选就设置相同的name值
- input新属性：
Audio/Video元素基本属性
- 如何动态创建播放器？
- 浏览器支持情况
- 如何知道资源链接？
- 音乐控件中如何加减音量？
- 如何控制播放器播放速度（playbackRate）？
- 如何暂停播放器（ play()/pause() ）？

html5结构元素

1，header整个页面的头部，某块区域的标题，页眉。
2，footer文档或者某一块的底部，页脚。
3，main主要内容区域
4，nav导航链接部分
5，section页面中一个内容区域
6，article它代表一个独立的，完整的相关内容块
7，aside元素表示一个页面的一部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。
8，figure标签规定独立的流内容（图像，图表，照片，代码等等）

Html5功能元素

》video视频 :

controls 控制播放

》audio音频 :

controls 控制播放
audio       默认无大小，需设置

》progress进度条：
如：

<html>
<body><progress id="progress" value="0" max="100"></progress>>>>我要前进了<script>var timer=setInterval(function (){if(progress.value==100){clearInterval(timer);}progress.value+=10;},1000)</script>
</body>
</html>

召唤御姐的小demo (复制粘贴即可用):

<html>
<style>img {opacity: 0;transition: opacity 1s ease;}#ImgSpan {display: block;width: 500px;text-align: center;color: white;background-color: #4c4c4c;opacity: 0;transition: opacity 1s ease;}
</style><body><p><progress id="progress" value="" max="100"></progress>>>>10秒等待...召唤御姐中</p><img id="Img" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1893214605,172916425&fm=26&gp=0.jpg"><p><span id="ImgSpan">是你在召唤我吗？</span></p><script>var timer = setInterval(function () {if (progress.value == 100) {clearInterval(timer);Img.style.opacity = 1;ImgSpan.style.opacity = 1;}progress.value += 10;}, 1000)</script>
</body></html>

效果图如下：

》source资源：
该标签可以为或元素指定一个或者多个的媒体资源

》figcaption标签定义figure元素的标题

Html5表单元素

要实现单选就设置相同的name值

如：
name值相同的情况》》》

<input type="radio" name="choose">选1
<input type="radio" name="choose">选2

name值不同的情况，哦豁，全部选中，无法单选》》》

<input type="radio" name="choose1">选1
<input type="radio" name="choose2">选2

//Multiple可上传多个文件 Placeholder提示 Pattern验证inpt类型输入框中内容是否与正则匹配

input新属性：

type="range" >max min step
可调节进度条type="number" >max min
可调节输入框type="email"
邮件提交框type="date"
日期文本框type="week"
周type="time"
时间type="month"
月type="datatime-local"
表示本地日期和时间type="color"选择颜色

Audio/Video元素基本属性

基本使用：

<audio src="./source/song.mp3" controls></audio>
<video src="./source/video.mp4" poster></video>//poster设置视频的海报

设置白色初音的图片为视频封面，比如：

<video id="myVideo" src="./source/video.mp4" poster>
<script>document.getElementById("myVideo").poster="https://img-blog.csdnimg.cn/20200415230726970.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTM2MjE2,size_16,color_FFFFFF,t_70";</script>

如何动态创建播放器？

如：

 var myAudio = new Audio('./source/song.mp3');myAudio.controls=true;document.body.appendChild(myAudio);

浏览器支持情况

canPlayType()方法
audio.canPlayType()返回probably或者maybe,返回空为不支持

如：

var myAudio=document.getElementById('myAudio');
if(myAudio.canPlayType){if(myAudio.canPlayType('audio/mpeg')!=""){
document.write('您的浏览器支持mp3编码;');
}
if(myAudio.canPlayType('audio/ogg'; codecs="vorbis")!=""){
document.write('您的浏览器支持ogg编码；');
}
if(myAudio.canPlayType('audio/mp4'; codecs="mp4a.40.5")!=""){
document.write('您的浏览器支持acc编码；');
}
}
else{
document,write('您的浏览器不支持要检测的音频文件');
}

\\\\\\\\\\\\\\\\\\\\\\\\\
多媒体属性：

controls 控件
autoplay    自动播放
muted   静音
loop循环播放preload(none/metadata/auto): 是否预加载
none: 不进行预加载
metadata: 部分预加载
auto: 全部预加载
pause：暂停
currentSrc: 返回资源链接（注意要资源加载完成才能获得到）
duration: 媒体持续时间（总时长，注意要资源加载完成才能获得到）
可由在该事件下获取：audio.oncanPlay=function (){}
currentTime: 返回或设置资源当前时间
volume: 音量[0-1],可读可写
muted: 静音
playbackRate+=0.1;
played 播放时间段
played.start;
played.end;

方法：

play()   播放
pause() 停止
load()  重置媒体元素并重新载入媒体，可中止正在进行的任务或事件,用于切换下一首非常有用
palybackRate:   读取或设置媒体资源播放的当前速率（大于1快放，大于0小于1慢放，无倒放）
paused/ended/seeking:   查询媒体播放状态，返回true/false
paused:     是否暂停
ended:      是否结束了
seeking： 正在请求某一播放位置的媒体数据
played/buffered/seekable:       均返回一个TimeRanges对象
(timeRanges对象的length属性为部分时间段，end(i)返回已播放时间段的结束时间，start(i)返回已播放时间段的开始时间)
played：      标明媒体资源在浏览器中已播放的时间范围
buffered:       确定浏览器已缓存媒体文件
seekable:       标明可以对当前媒体资源进行请求
play:       媒体开始播放时触发
pause:      媒体暂停时触发
ended:      资源播放结束
canplay:        浏览器能够开始播放媒体数据，但是不确定已当前的速率能否顺利的播放完媒体

如何知道资源链接？

如：

 //myAudio表示多媒体控件var myAudio=document.getElementById('myAudio');myAudio.oncanplay=function (){console.log(myAudio.currentSrc);}

音乐控件中如何加减音量？

如：

 //lessVolume表示减音量的按钮//myAudio表示多媒体控件lessVolume.onclick=function (){var volume=parseInt((myAudio.volume-0.1)*10)/10;//音量的范围是0到1.0，保险起见，所以小于或等于1的时候才可以赋值if(volume>=0 && volume <=1){myAudio.volume=volume;}}
//减的代码已经写好,加的话依次类推

如何控制播放器播放速度（playbackRate）？

如：

 myAudio.playbackRate += 0.1;

如何暂停播放器（ play()/pause() ）？

如：
方法一（根据myAudio.paused的状态判断后选择播放或暂停）：

<button id="p">play/pause</button>p.onclick=function (){if(myAudio.paused){myAudio.play();}else{myAudio.pause();}

方法二（设置一个变量做状态判断后选择播放或暂停）：

 p.onclick=function (){flag = !flag;if(flag){myAudio.play();}else{myAudio.pause();}