扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
HTML5的Audio标签,目前的主流浏览器都支持,只不过各种浏览器对音频的支持的格式不同,当前,audio 元素支持三种音频格式:
创新互联公司专注于通河网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供通河营销型网站建设,通河网站制作、通河网页设计、通河网站官网定制、成都微信小程序服务,打造通河网络公司原创品牌,更为您提供通河网站排名全网营销落地服务。
IE 9 支持 MP3
Firefox 3.5 支持 Ogg Vorbis、Wav
Opera 10.5 支持 Ogg Vorbis、Wav
Chrome 3.0 支持 Ogg Vorbis、MP3
Safari 3.0 支持 MP3、Wav
html5标签audio的autoplay属性可以设置在页面打开后自动播放。这个属性本来挺好的。但是最近做了一个项目却发现在iphone上无法自动播放。
各种查阅资料后发现原来iphone公司是考虑到用户可能是用手机流量访问的情况,为了用户流量着想,所以需要用户交互后才能播放。虽然苹果公司是出于好心,但是如果网页打开之后还需要一个交互才能听到美妙的背景音乐,那么网站的体验效果自然差了很多。可是这种问题要怎么解决呢?
冥思苦想了很久,终于做了一个艰难的决定。于是乎就这样尝试了一下:
$(function(){
$("#audio")[0].play();
})
没想到竟然好用!!!
全部的代码是这样
html
head
script src="js/jquery.js"/script
/head
body
audio id="audio" src="song.mp3" autoplay="autoplay"
您的浏览器不支持audio标签。
/audio
$(function(){
$("#audio")[0].play();
})
/body
/html
Android 是可以通过html5的video来播放视频的。
一、需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做
具体如下:
1如果要声明整个应用都要加速: application ... android:hardwareAccelerated ="true"
2.如果要在Activity中声明,则:
activity ... android:hardwareAccelerated="true"
Window, getWindow.setFlags( WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
我们使用html5的video标签,可以不依赖于任何第三方的插件或控件,直接在浏览器中实现视频播放功能。
在了解了video标签之后,下面我们就使用html5的video标签来实现视频播放。
现在,我们打开浏览器,看一看具体的效果:
为了更好地兼容各种浏览器,你可以为一个video标签添加多个source子标签,每个source标签引用一个不同格式的视频文件。这样,html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放,从而实现兼容多个浏览器的视频播放功能。
注:html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件,暂不支持其他格式的视频文件。此外,不同的html5浏览器支持的视频文件格式也略有不同,这种状况可能会在未来的html5中得以改善。
1、查看视频文件是否损坏,损坏的视频文件是无法播放的。
2、可能是手机不支持当前所播放的视屏格式,建议转换格式后再播放。
3、可能是所播放的视频尺寸超过苹果手机所允许的最大视频格式,建议将视频剪辑后再播放。
4、可能是当前网页不允许播放视频文件。
参考资料
百度经验.百度经验
可以做到。
1、下载播放器软件
2、关于html5语言的方法:使用基 于Webkit的浏览器如Safari/Chrome,然后登录苹果官方站点,便可以用HTML5视频标签功能直接用浏览器来播放
在浏览器地址栏输入bilibili.com/html/help.html#p。
2.在随后出现的画面中点击 →【试用点我】←,然后点击开启HTML5播放器试用
3.然后随便点一个视频点击HTML5播放器就可以随意飙车了
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流