0
我使用sproutvideo來存儲視頻，我嘗試使用jQuery UI設置控制欄，但播放按鈕不適用於iPhone和iPad等Apple設備。 這是工作link。 這是我的代碼。sproutvideo播放按鈕無法在蘋果設備上工作
var videoPlayer;
$(document).ready(function(){
\t $('.progress').slider({
\t \t value: 0,
\t \t orientation: "horizontal",
\t \t range: "min",
\t \t animate: true,
\t \t slide: function(event, ui) {
\t \t \t videoPlayer.seek(ui.value);
\t \t }
\t });
\t
\t var _duration = 0, _playing = false, _volume = 1, _fullscreen = false;
\t var videoPlayer = new SV.Player({videoId: 'e898d2b5111be3c860'});
\t
\t videoPlayer.bind('ready', function(event){
\t \t _duration = event.data.duration;
\t \t $(".progress").slider("option", "max", _duration);
\t });
\t videoPlayer.bind('progress', function(event){
\t \t $('.progress').slider("option", "value", (event.data.time));
\t });
\t videoPlayer.bind('pause', function(event){
\t \t _playing = false;
\t \t $('.play-pause i').removeClass('icon-pause').addClass('icon-play');
\t });
\t videoPlayer.bind('play', function(event){
\t \t _playing = true;
\t \t $('.play-pause i').removeClass('icon-play').addClass('icon-pause');
\t });
\t videoPlayer.bind('volume', function(event){
\t \t _volume = event.data;
\t \t if (_volume == 1) {
\t \t \t $('.volume i').removeClass('icon-volume-off').addClass('icon-volume-up');
\t \t } else if (_volume == 0) {
\t \t \t $('.volume i').removeClass('icon-volume-up').addClass('icon-volume-off');
\t \t }
\t });
\t $('.play-pause a').click(function(){
\t \t if (!_playing) {
\t \t \t videoPlayer.play();
\t \t } else {
\t \t \t videoPlayer.pause();
\t \t }
\t });
\t $('.volume a').click(function(){
\t \t if (_volume == 0) {
\t \t \t _volume = 1;
\t \t } else {
\t \t \t _volume = 0;
\t \t }
\t \t videoPlayer.setVolume(_volume);
\t });
\t $('.fullscreen a').click(function(){
\t \t var elem = $('.player')[0];
\t \t if (!_fullscreen) {
\t \t \t if (elem.requestFullscreen) {
\t \t \t \t elem.requestFullscreen();
\t \t \t } else if (elem.mozRequestFullScreen) {
\t \t \t \t elem.mozRequestFullScreen();
\t \t \t } else if (elem.webkitRequestFullscreen) {
\t \t \t \t elem.webkitRequestFullscreen();
\t \t \t }
\t \t \t _fullscreen = true;
\t \t } else {
\t \t \t if (document.exitFullscreen) {
\t \t \t \t document.exitFullscreen();
\t \t \t } else if (document.mozCancelFullScreen) {
\t \t \t \t document.mozCancelFullScreen();
\t \t \t } else if (document.webkitCancelFullScreen) {
\t \t \t \t document.webkitCancelFullScreen();
\t \t \t }
\t \t \t _fullscreen = false;
\t \t }
\t });
});html {
\t background: url(http://4walled.cc/src/7e/7e857f5f0db89a65aabcc6ed527a2743.jpg) no-repeat center center fixed;
\t -webkit-background-size: cover;
\t -moz-background-size: cover;
\t -o-background-size: cover;
\t background-size: cover;
}
.player {
\t width: 640px;
\t height: 403px;
\t position: relative;
\t margin: 50px auto;
\t border: 1px solid #CCC;
\t box-shadow: 1px 1px 15px #CCC;
}
.video {
\t position: absolute;
\t left:0;
\t right:0;
\t top: 0;
\t bottom:43px;
}
.control {
\t float: left;
\t padding: 0 10px;
}
.toolbar {
\t position: absolute;
\t left: 0;
\t right: 0;
\t bottom: 0;
\t background-color: rgba(255,255,255,0.8);
\t padding: 13px 0 13px;
}
.control a {
\t text-decoration: none;
\t color: #000000;
}
.progress-container {
\t position: absolute;
\t left: 43px;
\t right: 79px;
\t width: auto;
}
.volume, .fullscreen {
\t float: right;
}
.player:-webkit-full-screen {
width: 100%;
height: 100%;
}<script type="text/javascript" src="http://c.sproutvideo.com/player_api.js"></script>
\t \t <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
\t \t <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
\t \t <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>
\t \t <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
\t \t <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css">
<div class="player">
\t \t \t <div class="video">
\t \t \t \t <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>
\t \t \t </div>
\t \t \t <div class="toolbar">
\t \t \t \t <div class="control play-pause"><a href="#"><i class="icon-play"></i></a></div>
\t \t \t \t <div class="progress-container">
\t \t \t \t \t <div class="progress"></div>
\t \t \t \t </div>
\t \t \t \t <div class="control fullscreen"><a href="#"><i class="icon-fullscreen"></i></a></div>
\t \t \t \t <div class="control volume"><a href="#"><i class="icon-volume-up"></i></a></div>
\t \t \t </div>
\t \t </div>