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

Question

我使用sproutvideo 存储视频，我尝试使用jQuery UI 设置控制栏，但播放按钮在iPhone 和iPad 等Apple 设备上不起作用。 这是工作的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 的基于 iframe 的视频播放器通信的 API 的问题。

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