文档章节

网页播放声音和视频

傻男孩
 傻男孩
发布于 2017/06/22 11:06
字数 541
阅读 8
收藏 0

先啰嗦两句

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>

© 著作权归作者所有

傻男孩
粉丝 2
博文 47
码字总数 52350
作品 0
深圳
高级程序员
私信 提问
关于webview加载网页视频控制条问题 求帮助

在Android4.1上 播放网页视频,控制条显示在中间,并且 只有声音没有画面,全屏后,就都正常了 在Android6.0上 播放网页视频,声音画面都正常,就是没有控制条,不能全屏 有遇过同样问题的,请加好友...

wuyan01
2016/06/27
513
5
求问Android录制视频时,为什么用html5的video控件播放不出声音

我做了一个Android的视频录像功能,录像完毕后上传到服务器,然后可以在网页打开! 在Android内部录制完毕预览跟在服务器用迅雷等播放器打开视频文件都能正常的播放! 但是在HTML5的Video中播...

小爷胡汉三
2015/11/13
1K
1
使用ffmpeg转码失败

我百度上找了各种使用ffmpeg的代码,但是一直实现不了我想要的效果 1:首先我的视频在网站上播放是:黑屏+有声音 解码问题 2:网页上视频播放的时候屏幕一卡一卡的 视频的问题 PS:使用下面的...

Z-向上
2017/10/26
33
0
HTML 视频(Videos)

在 HTML 中播放视频的方法有很多种。 HTML视频(Videos)播放 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="vide......

wybo521
2015/12/26
46
0
Chrome 66禁止声音自动播放之后

声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播...

人人网FED
2018/05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

抽象同步队列AQS——AbstractQueuedSynchronizer锁详解

AQS——锁的底层支持 谈到并发,不得不谈ReentrantLock;而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQS定义了一套多线程访问共享资...

须臾之余
今天
3
0
springboot配置百度UEditor 富文本详解

富文本简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 准备工作 ueditor需要单独文...

wotrd
昨天
4
0
mysql 5.7之my.cnf配置大全

[client]port = 3306socket = /tmp/mysql.sock[mysqld]###############################基础设置######################################Mysql服务的唯一编号 每个mysql服务...

Online_Reus
昨天
3
0
MAVEN打包时引入外部链接的包

1.项目引入了ORACLE的jar包,MAVEN配置如下 2.打jar包的时候需要指定下main入口函数mainClass <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> ......

Cobbage
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部