Code first
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>test</title>
<script src="static/lib/jquery/jquery-1.10.1.min.js"></script>
</head>
<body>
<p class="loading"></p>
<script>
$(document).ready(function (){
/*------------ 初始化 -------------*/
//加载音乐
var LoadAudio = function (src){
this.audio = document.createElement('audio');
this.audio.src = src;
};
LoadAudio.prototype = {
constructor : LoadAudio,
play : function (){
this.audio.play();
},
pause : function (){
this.audio.pause();
},
isLoadFn : function (callback){
var that = this;
this.audio.addEventListener('canplaythrough', function (){
callback(true);
}, false);
}
};
var callMusic = new LoadAudio('static/images/call.mp3');
callMusic.isLoadFn(function (result){
alert(result);
if(result){
$('.loading').fadeOut();
}
});
});
</script>
</body>
</html>The current problem is that the mobile terminal cannot load normally when using traffic.
It can be used with WIFi. I don’t know what the problem is. Isn’t the canplaythrough monitoring event always monitored?
How to modify it, please give me some advice.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
For video, I use Video.js. I used to use the native version, but it wasn’t very easy to use. Everything about compatibility is already written