LonelyCpp / react-native-youtube-iframe

A wrapper of the Youtube-iframe API built for react native.
https://lonelycpp.github.io/react-native-youtube-iframe/
MIT License
607 stars 155 forks source link

Autoplay does not work on Web #340

Open Oranjoose opened 3 months ago

Oranjoose commented 3 months ago

Describe the bug There doesn't appear to be any way to get a YouTube video to autoplay on Web (autoplay works fine on Android)

To Reproduce `const playerRef = useRef(null);

const [playing, setPlaying] = useState(true);

return (

{setPlaying(true)}} initialPlayerParams={{controls:false, loop:true}} webViewProps={{onLoad: ()=>(setPlaying(true))}} /> ` **Expected behavior** The play prop set to true is expected to make the video play when ready. The onReady prop and webViewProp onLoad assigned to a function which sets the play prop to true should cause the video to play when the video is ready. **Additional context** The onReady prop doesn't appear to fire at all. The webViewProp onLoad does appear to fire, but setting the play prop to true or false doesn't do anything it appears. A Button component trying to set the play prop on the player doesn't do anything either. However, I'm really only interested in autoplay and loop, but it does not appear to work on Web.
Oranjoose commented 3 months ago

To add, having YouTube autoplay in a web browser is certainly possible, as can be seen in this jsfiddle: https://jsfiddle.net/7kqr4ac0/1/ . This is the code example:

<div id="ytplayer"></div>

JS:

// Load 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);

var videoId = 'wU4DgHHwVCc';
var startSeconds = 100;
var endSeconds = 120;

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;

var playerConfig = {
  height: '360',
  width: '640',
  videoId: videoId,
  playerVars: {
    rel:0,
    autoplay: 1, // Auto-play the video on load
    mute: 1,
    controls: 0, // Show pause/play buttons in player
    showinfo: 0, // Hide the video title
    modestbranding: 1, // Hide the Youtube Logo
    fs: 1, // Hide the full screen button
    cc_load_policy: 0, // Hide closed captions
    iv_load_policy: 3, // Hide the Video Annotations
    start: startSeconds,
    end: endSeconds,
    autohide: 0, // Hide video controls when playing
  },
  events: {
    'onStateChange': onStateChange
  }
};

function onYouTubeIframeAPIReady() {
  player = new YT.Player('ytplayer', playerConfig);
}

function onStateChange(state) {
  if (state.data === YT.PlayerState.ENDED) {
    player.loadVideoById({
      videoId: videoId,
      startSeconds: startSeconds,
      endSeconds: endSeconds
    });
  }
}

Using the YouTube API with JS in this way does get videos to autoplay. If react-native-youtube-iframe can inject the player vars of autoplay (set to 1) and mute (set to 1), along with the already working "controls" property (set to 0), then I believe autoplay would work.