繁体   English   中英

页面加载后触发点击功能

[英]Trigger click function after page load

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  $('#play')[0].click();//initial click on 'play' button to play music which doesn't seem to be working...
  $('#play').on('click',function(){
    $("#Audio1")[0].play();
})
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <audio id="Audio1" controls="controls" 
src="http://themes.rascals.eu/eprom/dark/wp-content/uploads/2012/11/Madoff-Bomp.mp3" type="audio/mp3" >
</audio>
 HTML5 Audio is required for this example. 

<input type="button" id="play" value="play" />


</body>
</html>

我想在“播放”按钮上触发点击事件以播放音乐。

我需要这样操作,因为“自动播放”不适用于移动设备。

由于数据问题,默认情况下将其禁用。

我在http://makandracards.com/makandra/13893-autoplay-html5-audio-in-chrome-for-android-mobile-safari-in-ios中找到了这篇文章,发现他是对的,好像我击中了这出戏手机上的按钮,音乐正在按预期播放。

页面加载后,我想触发此按钮。 它不起作用,但是如果我在控制台中运行相同的js,它将起作用。

编辑1

根据评论中给出的建议,我已经尝试过了,但是还是没有运气。

$(document).ready(function() {
  $('#play').on('click', function() {
    $("#Audio1")[0].play();
  })
  $('#play')[0].click(); //initial click on 'play' button to play music which doesn't seem to be working...
});

您需要在点击操作之前注册点击事件:

<script type="text/javascript">
    $(document).ready(function() {
        $('#play').on('click',function(){
            $("#Audio1")[0].play();
        });
        $('#play')[0].click();//initial click on 'play' button to play music which doesn't seem to be working...

    });
</script>

编辑

问题不在于您的点击操作。 单击事件按预期方式工作,但是Apple专门禁用了自动播放,直到用户通过用户操作(用户点击播放按钮)将其启动为止,如本文所述:

Safari HTML5音频和视频指南

如果你做你的输出<audio>元素,你会看到, paused你的财产<audio>将自动设置为'true'在呈现。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#play').on('click',function(event){
            $("#Audio1")[0].play();

            var myplay = document.getElementById('Audio1');
            var log = document.getElementById('screenlog');
            for (var prop in myplay) {
                log.innerHTML += prop + ":" + myplay[prop] + "<br>";
            }
        });
        $('#play')[0].click();

        });
    </script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>
<body>
<audio id="Audio1" controls="controls"
       src="http://themes.rascals.eu/eprom/dark/wp-content/uploads/2012/11/Madoff-Bomp.mp3" type="audio/mp3" >
</audio>
HTML5 Audio is required for this example.
<div id="screenlog"></div>
<input type="button" id="play" value="play" />


</body>
</html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM