Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autoplay does not work on Web #340

Open
Oranjoose opened this issue Jul 1, 2024 · 1 comment
Open

Autoplay does not work on Web #340

Oranjoose opened this issue Jul 1, 2024 · 1 comment

Comments

@Oranjoose
Copy link

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 (

<YoutubePlayer
ref={playerRef}
height={height}
play={playing}
videoId={'SGHNi6fJjZE'}
mute={true}
onReady={()=>{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
Copy link
Author

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.

@Oranjoose Oranjoose reopened this Jul 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant