YouTube Iframe API - モバイルで動画を再生

多くの類似の質問を検索して見つけた後、正解を見つけることができません。だから私はYouTube Iframe APIを使って作業しています。私は自動再生などが携帯端末では機能しないことを知っています。そして、携帯電話に表示する要素を作成しました。ユーザーがそのボタンをクリックすると、ビデオが再生されます。しかし、私はこのメッセージだけを受け取ります："再生がすぐに始まらない場合は、デバイスを再起動してみてください"YouTube Iframe API - モバイルで動画を再生

var playElement = document.createElement("div"); 
playElement.style.display = "none"; 

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
    playElement.style.display = "block"; 
} 

var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player(child, { 
     width: '100%', 
     height: '100%', 
     videoId: youtubeID, 
     playerVars: { 
     'iv_load_policy': 3, 
     'enablejsapi': 1, 
     'disablekb': 1, 
     'autoplay': 1, 
     'loop': 0, 
     'controls': 0, 
     'showinfo': 0, 
     'rel': 0, 
     'mode': 'transparent' 
     }, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

playElement.onclick = function() { 
    player.playVideo();; 
};

実用的な解決策を持っている人はいますか？

出典

2017-05-26 Marius Djerv

プレーヤーがID「player」のdivを参照していることを覚えておいてください。 youtube api docのサンプルコードから始めることができます。動画が読み込まれると、自動的に再生されます。 playerVarオプションも追加できます。

モバイルビデオの自動再生に関する注記。自動再生することはできますが、ミュートする必要があります。だから、それをロードしてクリックハンドラをセットアップするときにplayer.mute()を追加してみて、それがあなたが好む場合は再度ミュートを解除することができます。

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
 
    <div id="player"></div> 
 

 
    <script> 
 
     // 2. This code loads the IFrame Player API code asynchronously. 
 
     var tag = document.createElement('script'); 
 

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

 
     // 3. This function creates an <iframe> (and YouTube player) 
 
     // after the API code downloads. 
 
     var player; 
 
     function onYouTubeIframeAPIReady() { 
 
     player = new YT.Player('player', { 
 
      height: '390', 
 
      width: '640', 
 
      videoId: 'M7lc1UVf-VE', 
 
      events: { 
 
      'onReady': onPlayerReady, 
 
      'onStateChange': onPlayerStateChange 
 
      }, 
 
      playerVars 
 
     }); 
 
     } 
 

 
     // 4. The API will call this function when the video player is ready. 
 
     function onPlayerReady(event) { 
 
     event.target.playVideo(); 
 
     } 
 

 
     // 5. The API calls this function when the player's state changes. 
 
     // The function indicates that when playing a video (state=1), 
 
     // the player should play for six seconds and then stop. 
 
     var done = false; 
 
     function onPlayerStateChange(event) { 
 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
 
      setTimeout(stopVideo, 6000); 
 
      done = true; 
 
     } 
 
     } 
 
     function stopVideo() { 
 
     player.stopVideo(); 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

出典

2017-05-26 09:36:23 Jason

YouTube Iframe API - モバイルで動画を再生

答えて

関連する問題