javascript - HTML5 视频仅在移动设备上播放 onclick (droid chrome mobile)

Question

让我们开始看代码:

我正在准备文档: <video width="300" height="400" id="videoStage"></video><button onclick='video()'>Play video</button>

关于JS函数:

  function video(){
    var vid_url = "https://fbcdn-video-a.akamaihd.net/cfs-ak-ash4/v/82342/969/274169121921_63622.mp4?oh=99ef0d9285cbbd7adf8bc07a845dc0d1&oe=519E400F&__gda__=1369439362_83c7f900e92bdbaa201f49d35a7c144a";
    stage = document.getElementById('videoStage');
    stage.src = vid_url;
    stage.play();
  }

工作代码示例:http://jsbin.com/eviyel/1

此代码运行良好，可以在我的桌面和移动设备上播放视频。但是(!)当 video() 函数应用于 document.ready 时 - 它只在我的桌面上播放，而对于我的移动设备，它显示为空。

有什么解决办法吗？ 10 倍。

Answer 1

我自己找到了答案:

移动浏览器(例如 chrome mobile 和 iOs)必须首先进行有效的“点击”才能启用视频+音频播放。完成点击后，用于播放视频/音频的元素现在可以播放了。您现在可以更改该元素的 SRC 以编程方式播放任何新媒体源，而无需再次单击 DOM。