网页播放声音和视频
2017-06-22 00:00
411 查看
先啰嗦两句
其中很多老标签都被废弃了
原写法为
推荐使用
例如
用来定义字体、字号和颜色的也废弃了
比如
应当用
使内容居中的
同样应当用
其它的就不列举了
W3C已经发布了
HTML5.1的提案推荐标准:https://www.w3.org/TR/2016/PR-html51-20160915/
其中很多老标签都被废弃了
<bgsound></bgsound>
原写法为
<bgsound src="your.mid" autostart="true" loop="infinite"></bgsound>
推荐使用
<audio>或者
<object>+<embed/>来代替
例如
<embed src="your.mid" autostart="true" loop="true" hidden="true"/>
用来定义字体、字号和颜色的也废弃了
比如
<span style="font-family:verdana;font-size:14px;color:green;">some text</span>
应当用
CSS来代替
使内容居中的
<center>文本及子元素会居中</center>也被废弃了
同样应当用
CSS(text-align: center;)来控制
其它的就不列举了
播放声音
<!DOCTYPE HTML> <html> <head> <title>网页自动播放声音</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <script src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script> </head> <script> //这里参考了以下两个站点的介绍 //http://www.w3school.com.cn/html/html_audio.asp //http://www.zhanxin.info/development/2013-05-17-html5-audio.html //测试时可以用这个目录的声音D:\ProgramFiles\Tencent\QQ\Misc\Sound\Classic\ $(function(){ if($.browser.msie && $.browser.version=='8.0'){ //本来这里用的是<bgsound src="system.wav"/>,结果IE8不播放声音,于是换成了embed $('#newMessageDIV').html('<embed src="system.wav"/>'); }else{ //IE9+,Firefox,Chrome均支持<audio/> var sound = '<audio autoplay="autoplay">'; sound += '<source src="system.wav" type="audio/wav"/>'; sound += '<source src="system.mp3" type="audio/mpeg"/>'; sound += '</audio>'; $('#newMessageDIV').html(sound); } }); </script> <body> <div id="newMessageDIV" style="display:none"></div> </body> </html>
播放视频
<!-- 比较常用的和实用的,也就下面这几个 src :指定视频地址(这里是用<source>标签实现的) source :指定可选择的供浏览器显示的媒体(浏览器会从上往下直到找到能够播放的媒体) poster="" :设置视频数据无效或加载中时显示的预览图 preload="none" :定义视频不进行预加载 controls="controls":显示播放控制器 autoplay="autoplay":设置视频自动播放 loop="loop" :设置视频循环播放 --> <video style="width:100%; height:100%;" preload="none" controls="controls" poster="http://ww2.sinaimg.cn/large/723dadf5gw1f9wab7mmuij20wp0hggon.jpg"> <source id="mp4" src="http://gslb.miaopai.com/stream/HtNgr3djfi4nh859KYPpAg__.mp4" type="video/mp4"> <!-- <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> --> <p>Your user agent does not support the HTML5 Video element.</p> </video>
相关文章推荐
- HTML5的video标签,视频在网页播放没有画面只有声音,支持的格式,MP4,
- 网页视频播放时是绿色的 有声音没图像的解决办法
- XP浏览网页视频时没有声音,但是系统下是可以播放的问题
- win7本地播放视频或音乐有声音而网页上却没有声音
- Ubuntu的使用:在网页播放声音和视频
- Windows7系统播放网页视频没有声音的解决方法
- 安卓浏览器网页播放视频时后台声音不停止
- 网页中播放声音/视频
- 解决Windows 7播放网页视频没有声音的问题
- 网页中播放声音/视频
- 怎么解决网页中播放视频没有声音?
- 转: WebView载入一个网页 但是退出对应的activity时, 声音、视频无法停止播放 解决方案(未验证)
- 手机可以播放 网页播放mp4视频,出现有声音无图像问题
- 网页上的视频只有图像无声音——解决方法
- 怎么在网页中播放视频之一:HTML5视频嵌入
- 在网页中插入视频播放代码全集
- 网页 video视频播放
- Vuforia PlayBack视频自动播放(声音播放中,但显示等待,没有渲染视频)
- 网页制作之在线视频播放代码
- Javascript控制网页内Quicktime插件音视频播放