上接前几章krpano全景学习之路,开发过程中的思路是安装网上看到的成功的案例进行开发的,该有的热点啊、背景音乐啊、陀螺仪啊等等之类的,该有的全部都要背上。前面几个问题倒是不大,背景音乐这卡住了。相信大多数人都会遇到这个问题,Android和电脑上调试都没有问题,自动播放音乐啊都是可以的,但是苹果设备这确实出现比较大的问题。
微信内置浏览器不能自动播放!
苹果自带的Safari浏览器默认是禁用html5的autoplay功能的,为的就是防止没有必要的流量浪费,目测其他的移动端浏览器都有这样的设置(我测的搜狗是不可以自动播放的),
必须要一次交互操作才可以播放音乐。
因为现在的用户进入全景页面的入口大部分都是在微信里面,微信里面打开页面必然会用到微信内置的浏览器。
那么问题来了
苹果的移动端设备微信内置浏览器目前是不支持音频自动播放的(我的微信版本是6.5.3,后面会不会做兼容不得而知....)
咱们这次主要围绕着苹果移动端微信内置内置浏览器不能自动播放的问题来解决。
krpano中有layer设置的播放音乐的功能,但是同样的在微信内置浏览器里面还是不能自动播放。(然而需求来了... 就是就是就是不想多点一下!!必须自动播放!!)
只要你不是想我一样专注于微信内置浏览器的话,那么你真的可以考虑一下krpano自带的背景音乐插件功能。
-----------------------------------------------------代码分割线-------------------------------------------------------------------------------------------
首先打开tour.html文件
body里面添加audio标签
<audio preload="preload" autoplay id="audio" style="position: absolute; top: 20px;" src="1.mp3" controls="controls"></audio>
下面的关键了。因为是在微信内置的浏览器里面,所以需要依托微信的平台。
在页面script里面添加微信js-sdk的js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
var media = document.getElementById("audio");
wx.config({
// 配置信息
});
wx.ready(function () {
media.play();
});
</script>
这种方式是不基于krpano的实现方式。
krpano官网里面有关于背景音乐在iPhone和iPad的问题
Some HTML5 browsers doesn't support MP3 or MP4 audio files like the Flashplayer. There different audio formats like OGG or WAV need to be used. To provide several audio formats and let the plugin automatically choose the appropriate one, set the paths to all audio files at once and separate them by a pipe | character.
Example:
playsound(bg, 'sound.mp3|sound.ogg');
The technically possibilities with HTML5 are not same as with the Flashplayer. So when using the krpano HTML5 viewer not all features of the soundinterface plugin are supported.
Especially the 3D Sound features are not available here, as long as there is no volume panning available in HTML5 '3D Sound' will be not possible.
The Sound Object is also not supported here at the moment.
iOS (iPhone / iPad) Notes
There are additional system limitations on iOS devices (iPhone and iPad):
No Autoplay / Autostart!
A sound can't start to play automatically! An user interaction is needed to start playing the sound, e.g. a touch on the screen by the user. The krpano soundinterface plugin automatically detects that situations and when the playing is not possible it automatically queues the playsound() command and waits for the next user interaction to start the sound automatically (e.g. when the user touches the screen to pan the pano or to click a button).
Only one sound at one time!
Only one sound file can be played at one time! When there is the new playsound() call the last sound will be automatically stopped.
No volume change!
Changing the volume of a sound is not allowed on iOS devices.
上面的内容简单的翻译一下:
有的h5浏览器是不支持MP3或者MP4的 你最好使用ogg或者wav文件。巴拉巴拉巴拉....
NO AUTOPLAY/AUTOSTART 不能自动播放
Only one sound at one time 同一时间只能出现一个声音
No volume change 不能调整声音的大小。
上面是如果你使用krpano和苹果移动端会遇到的限制性问题。
安卓设备和电脑端目前是没有这方面的问题。