Javascript

Question

我正在尝试使用 Javascript 播放 jPlayer，但它无法从 Javascript 播放；我必须手动点击 <button> 才能播放。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <script type="text/javascript" src="http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript">

    function click_me_to_play() {
      $('#play').trigger('click');
    }

    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "Big Buck Bunny",
            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
            //ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
            //poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
          });
        },
        swfPath: "/js",
        supplied: "m4v, ogv",
        cssSelectorAncestor: "",
        cssSelector: {
          title: "#title",
          play: "#play",
          pause: "#pause",
          stop: "#stop",
          mute: "#mute",
          unmute: "#unmute",
          currentTime: "#currentTime",
         duration: "#duration"
        },
        size: {
          width: "320px",
          height: "180px"
        }
      });



    });
  </script>



  <style>
    div.jp-jplayer {
      border:1px solid #009be3;
    }
  </style>
</head>



<body onload="click_me_to_play();">
  <p>
    <button id="play">play</button>


  </p>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
</body>
<html>

Answer 1

在 /jPlayer-2.9.2/examples/blue.monday/demo-01.html fil0e 上有点笨拙但有效。

function click_me_to_play() {
   setTimeout(function(){ $("#jquery_jplayer_1").jPlayer("play",0); },1000);
}
 // tested on win7 Chrome 51+

我仍在寻找为什么这有效以及为什么没有超时它就不起作用。

更新：
所以现在我检查了一下，玩家的 ready 事件在主体 onload 事件之后完成。 所以这只是一个时间问题。 或者你可以使用 loadeddata 事件来检查文件是否被加载，然后触发 click_me_to_play 函数，如果你想避免 setTimeout 函数，并在文件加载时开始播放已加载。
（活动详情可查看jPlayer Event Docu）

更新二：
例如，在 loadeddata 事件上播放：

$("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        title: "Big Buck Bunny",
         ... 
      });
    },
    ...
    loadeddata:function(){
       $("#jquery_jplayer_1").jPlayer("play",0);
    }
  });

Javascript - 如何播放来自 javascript 的 jplayer？

Javascript - how to play the jplayer from javascript?

jquery

google-chrome

jplayer