Youtube 埋め込み iFrame APIでスマホで動画を自動再生する方法。(一部はできない

Youtube 埋め込み iFrame APIでスマホで動画を自動再生する方法。(一部はできない

基本音声が入っているとできない、古い機種はできない、最近はわりとできるようになってきている。
微妙に悩ましい状況、動画GIFや独自mp4やボタンを置いて再生とかいろいろ検討する。
(本質的なところを掘り下げたい、、昔のIE5とか6とかwindows2000とか思い出す不毛)

ES6の抜粋
ポイントは、onReady で再生準備できたところで、いったん、
this.player.mute();
とミュートしてから再生しているとこ。(音声はYoutubeにかかわらずスマホは全般自動はだめ)

class Hoge { 
    player;
    isPlay=false;
    
    constructor() {
        window.onYouTubeIframeAPIReady = $.proxy(this.loadYoutubeApi,this);
        let scriptEl = document.createElement('script');
        let headEl = document.querySelector('head');
        scriptEl.src = "https://www.youtube.com/iframe_api";
        headEl.appendChild(scriptEl);
    }
        
    loadYoutubeApi(){
        this.player = new YT.Player('bgndVideo', {
            videoId: 'YOUR_LIKE_VIDEO_ID',
            width: '1920',
            height: '1024',
            playerVars: {
                playsinline: 1,
                showControls: 1,
                modestbranding:1,
                showinfo:0,
                controls:0,
                rel:0
            },
            events: {
                'onReady': $.proxy(this.onReadyYoutube,this)
            }
        });
    }

    onReadyYoutube(e){
        this.player = e.target;
        this.player.mute();
        this.playVideo();
        $('#bgndVideo').addClass('ready');
    }

    playVideo(){
        this.player.seekTo(1);
        this.player.playVideo();
        this.isPlay = true;
        setTimeout($.proxy(this.playVideo),19*1000);
    }

全体はこんな感じ、これは実は短い動画をループ再生していて、
最後まで再生するとチラッっと黒くなってピカピカちらつくので、最後に到達する前にループしています。(背景のまぁいめーじなので、大丈夫)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です