怎么在HTML5中嵌入音频和视频

　　介绍

这篇文章给大家介绍怎么在HTML5中嵌入音频和视频,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强> HTML5支持的音频格式:

怎么在HTML5中嵌入音频和视频

<强>视频

视频格式:

怎么在HTML5中嵌入音频和视频

由上可知,HTML5貌似支持的格式有点少哈,所以当你发现用HTML5放置音频和视频不显示时,应该就是格式不支持的问题。注:,MP4有3种编码,mpg4 (xdiv), mpg4 xvid, avc (h364),只有h364才是公认的MP4标准编码(在这也是被坑了,其他格式的只有声音没有图像。)遇到这种问题,就用视频格式转换器,转换一下格式就好啦。

音频实现起来很简单:这里工具条使用了浏览器默认的工具条。

& lt; audio  src=https://www.yisu.com/zixun/癶tml/1. mp3”控制=翱刂啤毖?把贰痹ぜ釉?"自动"> 　　你的浏览器不支持视频元素 　　

怎么在HTML5中嵌入音频和视频”> <br/>, </p> <p>视频虽然也可以使用浏览器默认的,但无法实现私人订制,所以从学技术的角度讲,还是要学习一下自己做工具实现功能(音频也可参照此方法)。</p> <p>音视频。html </p> <pre类= & lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=癠TF-8"祝辞 　　& lt; title>网页放置视频& lt;/title> 　　& lt; style 类型=拔谋?css"比; 　　& lt;/style> 　　& lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" js/ControlBar.js "> 　　头 　　<身体> 　　<音频src=" html/1。mp3”控制="控制"循环="循环汽车“预加载=> 　　你的浏览器不支持视频元素 　　 　　<视频id=" myPlayer "宽度=" 600 "高度=" 400 " src=" html/2 _1。mp4”控制="控制"循环="循环”海报=" 3. jpg”> 　　你的浏览器不支持音频元素 　　 　　 　　

　　 　　<输入id=疤寤崩嘈?胺段А眒in=" 0 " max=?”一步=" 0.1 " onchange="卷(这个)"> 　　 　　 1 fps 　　<按钮onclick="(这)”id=" btn1 ">播放 　　快速<按钮onclick="() ">快进按钮 　　<按钮onclick="缓慢()">慢进> 后退> 前进> 静音> 　　

显示(html)与功能实现(js)分离,由外部导入

ControlBar。js

//使用脚本检测浏览器的标签支持情况 　　var  support =, ! ! document.createElement (“audio") .canPlayType; 　　if 支持(!),{ 　　alert(“你的浏览器不支持本视频播放“); 　　}//,定义全局的视频对象 　　var  e1 =,空; 　　window.addEventListener (“load",,()函数,{ 　　时间=e1  . getelementbyid (“myPlayer"); 　　})；/*前进:一分钟,*/function  Next (), { 　　e1.currentTime +=10,,//设置属性currentTime,快进10年代 　　}/*后退:一分钟,*/function 上一页(),{ 　　e1.currentTime -=10,,//设置属性currentTime,后退10年代 　　}/*播放/暂停*/function 玩(e), { 　　如果(e1.paused) { 　　e1.play (); 　　. getelementbyid (“btn1") .innerHTML=霸萃！? 　　其他}{ 　　e1.pause (); 　　. getelementbyid (“btn1") .innerHTML=安シ拧? 　　} 　　}/*慢进:小于等于1时,每次都只减0.2的慢速率;大于1时,每次减1,*/function 慢(){ 　　如果(e1.playbackRate<=1) { 　　e1.playbackRate -=0.2; 　　其他}{ 　　e1.playbackRate -=1; 　　} 　　. getelementbyid (“rate") .innerHTML=fps2fps (e1.playbackRate); 　　}/*慢进:小于等于1时,每次都只减0.2的慢速率;大于1时,每次减1,*/function 快速(){ 　　如果(e1.playbackRate<1) { 　　e1.playbackRate +=0.2; 　　其他}{ 　　e1.playbackRate +=1; 　　} 　　. getelementbyid (“rate") .innerHTML=fps2fps (e1.playbackRate); 　　} 　　function  fps2fps (fps) { 　　如果(fps<1) { 　　return  fps.toFixed (1); 　　其他}{ 　　return  fps; 　　} 　　}/*静音*/function 温和(e) { 　　如果(e1.muted) { 　　e1.muted=false; 　　e.innerHRML=癤"; 　　. getelementbyid (“volume") value=https://www.yisu.com/zixun/e1.volume; 　　其他}{ 　　e1.muted=true; 　　e.innerHRML=" x "; 　　. getelementbyid(“卷”)value=0; 　　} 　　}/*调整音量*/函数体积(e) { 　　如果(e1.muted==true) { 　　e1.muted=false; 　　} 　　e1.volume=e.value; 　　}/*进度信息:控制进度条,并显示进度时间*/函数进展(){ 　　var p1=. getelementbyid(“进步”); 　　p1.style.width=(e1.currentTime/e1.duration) * 720 +“px”; 　　. getelementbyid(“信息”).innerHTML=s2time (e1.currentTime) + " + s2time (e1.duration); 　　} 　　函数s2time (s) { 　　var m=parseFloat (s/60) .toFixed (0); 　　s=parseFloat (s % 60) .toFixed (0); 　　返回(m

怎么在HTML5中嵌入音频和视频