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);
}
全体はこんな感じ、これは実は短い動画をループ再生していて、
最後まで再生するとチラッっと黒くなってピカピカちらつくので、最後に到達する前にループしています。(背景のまぁいめーじなので、大丈夫)
コメントを残す