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

Posted 2023-03-12

【中文标题】sproutvideo 播放按钮在苹果设备上不起作用

【英文标题】：sproutvideo play button doesn't work on apple devices

【发布时间】：2015-06-12 14:30:44

【问题描述】：

我使用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>

【参考方案1】：

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

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