html5中如何嵌入视频,html如何嵌入音频
简介
HTML5出来之前，在线影音都是通过Flash或者第三方工具实现的。现在HTML5也支持这个功能。在支持HTML5的浏览器中，无需安装任何插件即可播放音频和视频。对音频和视频的原始支持为HTML5注入了巨大的发展潜力。
在html中实现音频嵌入(传统方式):这种方式虽然可以实现，但是由于浏览器支持Flash，不能实现控件，所以实现起来很麻烦。
object height= 200 width= 200 data= 2 _ 1 . swf /object embedded src= 2 _ 1 . MP4 type= 那么HTML5有一个很大的问题，就是兼容性。音频
HTML5支持的音频格式：
视频
视频格式：
从上面可以看出，HTML5似乎支持的格式少了一点，所以当你发现使用HTML5放置音频和视频而不显示时，应该是格式不支持的问题。注：MP4编码有三种，MPG4 (XDIV)、MPG4 (XVID)和avc(h264)。只有h264是公认的标准MP4码(这里也坑。其他格式只有声音没有图像。)遇到这种问题就用视频格式转换器，转换格式就OK了。
音频很容易实现：这里的工具栏使用浏览器的默认工具栏。
audio src= html s/1 . MP3 controls= controls loop= loop preload= auto 您的浏览器不支持视频元素/音频。
虽然浏览器可以使用默认视频，但是不能私人定制。所以从学习技术的角度来说，还是要学会自己制作工具来实现功能(音频也可以参考这个方法)。
audioVideo.html
！type dochtmlhtmlheadmeta charset= utf-8 title网页位置video/title style type= text/CSS /style script type= text/JavaScript src= js/control bar . js /script/body Audio src= HTMLS/1 . MP3 controls= controls loop= loop preload= auto 您的浏览器不支持视频元素/音频id= my player width= 600 height= 400 src= htmMP4编码有三种，MPG4 (XDIV)、MPG4 (XVID)和avc(h264)。只有h264是公认的标准MP4代码-/视频div id= progress/div！-volume control-input id= volume type= range min= 0 max= 1 step= 0.1 onchange= volume(this)！-速率和时间进度信息-span id= rate 1/span fps span id= info /span Button onclick= play(this) id= Bt n1 play/Button Button onclick= Fast()快进/Button onclick= slow()慢速前进/buttonbutton onclick=Prev()后退/buttonbutton onclick=Next()前进/Button Button onclick= muted(this)静音/button/body/html显示(html)与功能实现(js)分开
ControlBar.js
//使用脚本检测浏览器的标签支持情况定义变量支持=!document.createElement(audio )。canPlayType如果(!支持){alert(你的浏览器不支持本视频播放);}//定义全局的视频对象var E1=null window . addevent listener( load ，function(){ E1=文档。getelementbyid(“我的玩家”)；});/*前进：一分钟*/function Next(){ E1。当前时间=10；//设置属性当前时间，快进10s}/*后退：一分钟*/function Prev(){ E1。当前时间-=10；//设置属性当前时间，后退10s}/*播放/暂停*/函数Play(e){ if(E1。{ E1停顿了一下)。play()；document.getElementById(btn1 ).innerHTML=暂停} else { E1。pause()；document.getElementById(btn1 ).innerHTML=播放}}/*慢进：小于等于一时，每次都只减慢0.2的速率；大于一时，每次减1 */function Slow(){ if(E1。回放速率=1){ E1。回放速率-=0.2；} else { E1。回放速率-=1；}document.getElementById(rate ).innerHTML=fps 2 fps(E1。播放速率)；}/*慢进：小于等于一时，每次都只减慢0.2的速率；大于一时，每次减1 */function Fast(){ if(E1。回放速率1){ E1。回放速率=0.2；} else { E1。回放速率=1；}document.getElementById(rate ).innerHTML=fps 2 fps(E1。播放速率)；}函数fps 2 fps(fps){ if(fps 1){ return fps。到固定；}否则{返回fps}}/*静音*/功能静音(e){ if(E1。静音){ E1。静音=假；e.innerHRML= Xdocument。getelementbyid(“volume”).value=E1 . volume } else { E1 . muted=truee . innerhrml= x document。getelementbyid(“volume”).值=0;}}/*调整音量*/函数卷(e){ if(E1。muted==true){ E1。静音=假；}e1。音量=e。值；}/* 进度信息：控制进度条，并显示进度时间*/函数Progress(){ var P1=document。getelementbyid(“Progress”)；P1。风格。宽度=(E1。当前时间/E1。持续时间)* 720 pxdocument.getElementById(info ).innerHTML=S2时间(E1。当前时间)/ S2时间(E1。持续时间)；}函数s2time(s){var m=parseFloat(s/60).到固定值(0)；s=parseFloat(s `).到固定值(0)；返回(m10？0 m:m) : (s10？0的：s)；}/* 网页加载完毕后，把进度处理函数添加至视频对象的时间更新事件中*/窗口。addevent侦听器( load ，函数(){ E1。addevent侦听器(“时间更新”，进度)；});/*给窗户。装载事件添加进度处理函数*/窗口。addevent侦听器( load ，Progress)；实现的功能：播放，暂停，快进，慢进，前进，后退，音量控制，进度条和时间显示。由此可见通过声音的或录像的属性和方法可以实现更复杂的功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。