sproutvideo 播放按钮在苹果设备上不起作用

Question

我使用 sproutvideo 来存储视频，我尝试使用 jQuery UI 设置控制栏，但播放按钮在 [=24] 等苹果设备上不起作用=] 和 iPad。这是工作 link。那是我的代码。

var videoPlayer;
$(document).ready(function(){
 $('.progress').slider({
  value: 0,
  orientation: "horizontal",
  range: "min",
  animate: true,
  slide: function(event, ui) {
   videoPlayer.seek(ui.value);
  }
 });
 
 var _duration = 0, _playing = false, _volume = 1, _fullscreen = false;

 var videoPlayer = new SV.Player({videoId: 'e898d2b5111be3c860'});
 
 videoPlayer.bind('ready', function(event){
  _duration = event.data.duration;
  $(".progress").slider("option", "max", _duration);
 });

 videoPlayer.bind('progress', function(event){
  $('.progress').slider("option", "value", (event.data.time));
 });

 videoPlayer.bind('pause', function(event){
  _playing = false;
  $('.play-pause i').removeClass('icon-pause').addClass('icon-play');
 });

 videoPlayer.bind('play', function(event){
  _playing = true;
  $('.play-pause i').removeClass('icon-play').addClass('icon-pause');
 });

 videoPlayer.bind('volume', function(event){
  _volume = event.data;
  if (_volume == 1) {
   $('.volume i').removeClass('icon-volume-off').addClass('icon-volume-up');
  } else if (_volume == 0) {
   $('.volume i').removeClass('icon-volume-up').addClass('icon-volume-off');
  }
 });

 $('.play-pause a').click(function(){
  if (!_playing) {
   videoPlayer.play();
  } else {
   videoPlayer.pause();
  }
 });

 $('.volume a').click(function(){
  if (_volume == 0) {
   _volume = 1;
  } else {
   _volume = 0;
  }
  videoPlayer.setVolume(_volume);

 });

 $('.fullscreen a').click(function(){
  var elem = $('.player')[0];
  if (!_fullscreen) {
   if (elem.requestFullscreen) {
    elem.requestFullscreen();
   } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
   } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
   }
   _fullscreen = true;
  } else {
   if (document.exitFullscreen) {
    document.exitFullscreen();
   } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
   } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
   }
   _fullscreen = false;
  }
 });

});

html {
 background: url(http://4walled.cc/src/7e/7e857f5f0db89a65aabcc6ed527a2743.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.player {
 width: 640px;
 height: 403px;
 position: relative;
 margin: 50px auto;
 border: 1px solid #CCC;
 box-shadow: 1px 1px 15px #CCC;
}

.video {
 position: absolute;
 left:0;
 right:0;
 top: 0;
 bottom:43px;
}

.control {
 float: left;
 padding: 0 10px;
}
.toolbar {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(255,255,255,0.8);
 padding: 13px 0 13px;

}

.control a {
 text-decoration: none;
 color: #000000;
}

.progress-container {
 position: absolute;
 left: 43px;
 right: 79px;
 width: auto;
}
.volume, .fullscreen {
 float: right;
}

.player:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

<script type="text/javascript" src="http://c.sproutvideo.com/player_api.js"></script>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">


<div class="player">
   <div class="video">
    <iframe class='sproutvideo-player' type='text/html' src='https://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=sd&noBigPlay=true&showcontrols=false' width='100%' height='100%' frameborder='0'></iframe>
   </div>
   <div class="toolbar">
    <div class="control play-pause"><a href="#"><i class="icon-play"></i></a></div>
    <div class="progress-container">
     <div class="progress"></div>
    </div>
    <div class="control fullscreen"><a href="#"><i class="icon-fullscreen"></i></a></div>
    <div class="control volume"><a href="#"><i class="icon-volume-up"></i></a></div>
   </div>
  </div>

Answer 1

Mobile Safari 不允许调用 <video> 上的 play() 方法，除非它是由 MouseEvent 触发的。由于 SproutVideo 播放器 API 使用 Window.postMessage() 与播放器 iframe 通信，因此 MouseEvent 丢失并且 Safari 将不允许调用 play() 函数。这也是 YouTube javascript API、Vimeo javascript API 以及几乎所有与基于 iframe 的视频播放器通信的 API 的问题使用 iframe。

很遗憾，目前没有解决方法。一个好的临时解决方案是有条件地隐藏 iOS 设备上的自定义播放器控件并改用本机视频播放器。

sproutvideo 播放按钮在苹果设备上不起作用

sproutvideo play button doesn't work on apple devices

javascript

iphone

jquery

ipad

ios