youtube播放视频点击无法在ios设备上运行

时间:2015-11-21 18:28:03

标签: javascript jquery youtube-api

苹果阻止了视频的自动播放。我明白了但是真的不是我可以对我的代码做些什么来让它在外部div上播放?我很难接受这一次的失败。不喜欢“不能做”的想法。当用户以任何方式点击播放按钮时,我的用户正在做出有意识的选择。因此它不是页面加载时的随机自动播放。这是我的代码。像桌面浏览器上的魅力一样工作。但真的想让它在ios设备上运行

callMain ();

function playerApp(inputVid) {
    var player = new YT.Player('player', {
      videoId: inputVid,
      width:'100%',
      height:'90%',
      playerVars: {
        rel: 0,
        controls : 2,
        enablejsapi : 1,
        origin : document.domain,
        wmode : "transparent"
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

function onPlayerReady(e) {
    e.target.playVideo();
}

function onPlayerStateChange(e) {
    //this removes the player once the video is done
    if(e.data == 0){
        backgroundOverlay(false);
        $('.videoplayer-wrapper').remove();
    }
}

function backgroundOverlay(state){

    var pageHeight = $( document ).height();
    var overlay = '';
    var wrapperHTML = ''
        + '<div class="videoplayer-wrapper">'
            + '<div id="player" class="video-player"></div>'
            + '<div class="videoplayer-close videoplayer-toggle">Close</div>'
        + '</div>';

    if(state){
        overlay = $('body').append('<div class="video-overlay-background" style="height:'+pageHeight+'px;"></div>').append(wrapperHTML);
    }else{
        overlay = $('.video-overlay-background').remove();
    }

    return overlay;
}


function callMain () //$(function(){
    {
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var inputVid = '';
    $('.videoplayer-toggle').on('click', function(){
        inputVid = $(this).attr('data-youtubeid');
        backgroundOverlay(true);
        playerApp(inputVid)

        $('.videoplayer-close').on('click', function(){
            backgroundOverlay(false);
            $('.videoplayer-wrapper').remove()
        })

    });
}

这是我的jsfiddle

http://jsfiddle.net/sghoush1/zmqj6h1b/

0 个答案:

没有答案