[英]playing html5 <audio> tag from javascript in iOS chrome
更新原来是Google云端硬盘问题。 出于某些原因,必须将移动浏览器上的文件设置为完全公开才能使用,而桌面浏览器上的文件可以与“具有链接的任何人”一起播放。 缺乏体面的错误报告使得很难对此进行追踪。
问题:单击按钮以播放html5标签在所有台式机浏览器上均能完美运行,但不适用于iOS下的mobile-chrome或mobile-safari。 (尚未在android上测试过)。
这个示例可在我测试过的所有台式机浏览器上完美运行,但不适用于iOS Chrome或iOS野生动物园。 我不知道为什么。 我已经在这里写出了div,但是我正在以编程方式创建它,因为其中可能有一些。 为了进行测试,我使用了下面介绍的内容。
DIV :( 下面的“ myfileidgoeshere”是此处删除的实际ID。 )
<div id="user0">
<div><img src="icon.png" class="icon">Title</div>
<div class="buttons">
<div><audio id="player_user0">
<source id="src_user0" src="https://googledrive.com/host/myfileidgoeshere" type="audio/mp3"></audio>
</div>
<button type="button" class="btn" onclick="playUserAudio2(this)">
<span class="glyphicon glyphicon-play white play"></span></button>
</div></div>
播放功能:(由于我正在以编程方式编写上述div,因此我必须获取变量。
function playUserAudio2(target) {
var id = $(target).parent().parent().closest('div').attr('id');
var link = $('#src_'+id).attr('src');
var myAudio=document.getElementById('player_'+id);
//some graphical tweaks to show/hide play pause button
var toggle = $(target).find('span.play');
if(toggle.hasClass('glyphicon-play')){
active = $(target).parent().addClass('glow');
toggle.removeClass('glyphicon-play');
toggle.addClass('glyphicon-stop');
myAudio.play();
$('#player_'+id).on("ended", function(){
toggle.removeClass('glyphicon-stop');
toggle.addClass('glyphicon-play');
})
}else{
toggle.removeClass('glyphicon-stop');
toggle.addClass('glyphicon-play');
myAudio.pause();
myAudio.currentTime=0.0; //pause and reset the time to stop.
}
}
该问题原来是Google云端硬盘问题。 由于某些原因,必须将移动浏览器上的文件设置为在Google云端硬盘上完全公开,以便可以与“知道链接的任何人”一起播放桌面浏览器上的文件时使用。 移动端缺乏体面的错误报告,很难对此进行追踪。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.