audio和EMBED配合同时兼容IE8和safiri

最新推荐文章于 2023-03-01 22:11:24 发布
最新推荐文章于 2023-03-01 22:11:24 发布
阅读量4.3k 收藏 2
点赞数
文章标签： audio HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hua245942641/article/details/49744449
版权
本文介绍了如何在HTML5中使用audio标签播放背景音乐，并解决IE8不支持audio以及Safari需用户交互才能播放媒体的问题。通过配合EMBED标签，实现了对IE8的兼容。此外，利用JavaScript监听document的触摸事件，解决Safari需用户交互后才能播放的问题。
摘要由CSDN通过智能技术生成

在HTML5中通常使用audio标签来播放背景音乐

<audio id="musicAudio" loop="" src="./media/bg.mp3" autoplay preload></audio>

同时会出现两个问题：
1、IE8不支持audio属性
2、safiri必须等待用户的交互动作后才能播放media

解决方法如下：
1、IE8不支持audio属性
通过配合使用EMBED和audio来达到同时支持IE8和其它浏览器。
if lte IE 8能够在IE8之下使用EMBED标签即可。

<!--[if lte IE 8]>
<EMBED src="./media/bg.mp3" aut
最低0.47元/天 解锁文章
华仔呵呵呵呵
关注
浏览器兼容性问题及解决方案大汇总
qq_51179053的博客
07-03 3226
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
一篇博文带你0基础 Html和css入门
贪吃ღ大魔王
05-28 1005
前端初学入门，找不到学习方向，不喜欢记笔记？没关系，这篇博文为你整理了详细的学习笔记汇总，欢迎收藏，喜欢的可以直接到博文尾处，免费下载md笔记哦~⭐⭐⭐ # Html5 网站: 1、网站的建立流程???? 注册域名 租用空间 网站建设 确定网站的主题 搜索资料 规划网站 制作页面 4.网站的推广 5.网站的维护 2、网页的组成及web标准???? 结构：网页的结构部分 xhtml或html 表现：网页的样式css 行为：网页要实现的功能JS HTML 超文本标记语言 XHTML 可扩
embed 在ie上播放视频
ljqzxw的博客
03-01 276
因为要兼容ie8，不得不用embed播放视频，但是由于yyds浏览器ie对embed有特殊的展示方法，为视频提供了一个Windows Media Player控件，这个控件在embed被移除后不会消失！翻遍了百度查到一个叫windowlessVideo（默认值false） 的属性，这个属性为true时可以不显示Windows Media Player控件！今天遇到个奇葩的问题，embed 在ie上播放视频，通过js移除embed后，会在网页上留下个黑框（video没有这问题）。
使用 audio 和 embed 实现浏览器兼容的网页声音播放
yimiyangguang的专栏
07-27 1万+
使用 audio 和 embed 实现浏览器兼容的网页声音播放
采用 audio 和 embed 实现浏览器的兼容性页音频播放
weixin_34293141的博客
11-06 290
采用 audio 和 embed 实现浏览器的兼容性页音频播放 采用 audio 和 embed 实现浏览器的兼容性页音频播放 学习参考源代码如下所示： function playSound() { var borswer = window.navigator.userAgent.toLowerCase(); if ( borswer.indexOf( "ie...
兼容chrome和ie的wav音乐播放(Ie7 Ie8 Ie9 均测试过 )
weixin_30405421的博客
05-22 289
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
html中 embed 与 video 的区别
TaoYuan
08-02 1万+
embed是针对非IE的浏览器的媒体播放器 object标签一般是在IE中用的。非IE很少支持object。 所以object与embed同时出现，为的就是兼容不同的浏览器。 video是html5出的一种新标准，但并不是所有的浏览器都支持。 video虽然号称可以支持三种媒体类型，但常用的只有mp4。 embed和object有一个特点，就是无法动态渲染，所以无法通过jQuery去操作do...
mp3网页播放兼容大部分浏览器
01-12
"mp3网页播放兼容大部分浏览器"这个主题聚焦于如何创建一个跨浏览器的MP3播放解决方案，确保在Firefox (FF)、Google Chrome、Safari、Opera、Internet Explorer (IE) 6、7、8以及360、搜狗、世界之窗和遨游等常见...
网页万能播放器：兼容多种视频格式
在选择网页播放器时，开发者通常要考虑跨浏览器兼容性，确保在主流浏览器（如Chrome、Firefox、Safari和IE等）上都能正常工作。此外，考虑到性能和安全性，现代网页可能倾向于使用HTML5的和<audio>标签，它们提供了...
亲测可用。IE8下播放mp4格式的视频
09-18
经测完全可用。ie8 下播放mp4 ，在尝试过许多的方法后终于可以在IE8中播放MP4格式的视频了
页面声音播放（embed标签）
weixin_30414305的博客
12-13 1131
<embed>标签是html5中的新标签。 <embed> 标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音。 举例如： <embed id="sound" src="/sound/alarm.wav" loop="-1" autostart="true" hidden="true"></embed> src：嵌入内容的...
IE、chorme、firefox、safari对于<object>标签<embed>标签支持情况
ndsc0201的专栏
04-24 8450
今天在HTML标签的时候学习了标签和标签，发现各个浏览器对他们的支持情况差别很大，我想总结一下我所学到的内容。我是一个小菜鸟，希望有问题莫怪哈。 网页中显示富媒体（Flash、视频、音频）需要用到两个元素：和。 和 元素能够告诉浏览器几件事： 1、文件名和文件存放位置    2、文件的格式 3、播放该文件所需的插件的种类 在元素中，可以使用元素为播放器提供这些信息。元素不是在元素可以
直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
热门推荐
hsicool的专栏
04-10 1万+
转载地址：点击打开链接 参考地址：点击打开链接 虽然我的mp4格式的视频 还是没播放起来 但觉得 这些 还是很有参考价值的 支持低版本IE的html5播放器演示 点我查看演示页面 通常人们习惯用swf播放器来播放网络视频音频 HTML5给我们带来了很多惊喜，其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频。video标签虽好，然而
利用FlashPaper在web页面中显示PDF文件(兼容各浏览器）
weixin_30675247的博客
02-07 394
应项目需求要把PDF内嵌到网页中显示，其中有了很多办法，比如用<embed/>元素放入PDF文件，但是效果不理想，浏览器兼容不理想，在ie9/8（其他版本没有测试）显示会提示下载pdf文件。当然这不是我想要的效果，这种做法可以轻易地在网络上找到，我这里不就细说。 下面介绍的是另一种办法，就是借用FlashPaper软件改用swf格式来实现，各大浏览器对flash的支持已经相当...
浅谈html5网页内嵌视频
weixin_30687587的博客
01-30 650
更好的阅读体验：浅谈html5网页内嵌视频 如今在这个特殊的时代下：flash将死未死，微软和IE的历史问题，html5标准未定，苹果和谷歌的闭源和开源之争，移动互联网的大势所趋，浏览器各自为战...这些都导致web开发者在设计视频解决方案的时候相当困惑。本文围绕这个主题，来探讨一下相关的技术，原理和工具。 编码与格式的误区 很多人将编码和格式误认为是同一个东西，往往以视频文件的后缀来...
写一个html 嵌入 视频 的代码，兼容 IE8
最新发布
06-12
以下是兼容IE8的HTML代码示例，用于嵌入视频（请将视频链接替换为您自己的链接）： ... <embed type="application/x-mplayer2" ...同时，由于IE8对HTML和CSS的支持有限，所以建议使用更现代的浏览器来浏览网页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值