全屏播放 Youtube iframe

Question

我在 iframe 中有一个嵌入 Youtube 视频的页面。 每当有人播放视频时，我都想将视频设置为全屏。 我尝试了很多东西，但似乎无法正常工作。

我的代码：

<div class="video-wrapper">
    <div class="video">
        <iframe id="home-video" allowfullscreen="allowfullscreen"     mozallowfullscreen="mozallowfullscreen"
                                        msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen"
                                        webkitallowfullscreen="webkitallowfullscreen" frameborder="0"
                                        src="https://www.youtube.com/watch_popup?v=dQw4w9WgXcQ">
        </iframe>
    </div>
</div>

我也尝试使用 Youtube Api 完成此操作，但没有成功。

 <script src="https://www.youtube.com/iframe_api"></script>

有人吗？

Answer 1

我会尝试 HTML5 的 fullScreen API：

function fullScreen() {

    var e = document.getElementById("video-wrapper");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
}

function YTStateChange(event) {
    switch(event.data) {
        case -1:
            fullScreen();
        break;
        case 1:
            // some code
        break;
        case 2:
            // some code 
        break;
        default:
        break;
    }
}

$(document).ready(function () {
    var player = new YT.Player( 'video-wrapper', {
        events: { 'onStateChange': YTStateChange }
    });
});

Answer 2

使用 youtube Iframe Api 并将其设置为监听播放器事件： https://developers.google.com/youtube/iframe_api_reference

一旦你得到播放事件，调用你的全屏函数

            function launchIntoFullscreen(element) {
              if(element.requestFullscreen) {
                element.requestFullscreen();
              } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
              } else if(element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
              } else if(element.msRequestFullscreen) {
                element.msRequestFullscreen();
              }
            }

            function onPlayerStateChange(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                 launchIntoFullscreen(YOURIFRAME)
              }
            }

Answer 3

使用 React Native...

我制作了这个很好用的 useEffect。唯一的问题是我使用的是 React Native Youtube Iframe，它还没有在 iOS 上监听全屏请求，所以我不得不添加自己的全屏按钮。如果有人对如何帮助图书馆所有者有任何想法，将受到欢迎。 ;-) https://github.com/LonelyCpp/react-native-youtube-iframe/issues/45

这个 useEffect 通过监听 playerFullScreen 变量并更改保存播放器样式的帧以及屏幕方向来工作。

这样播放器实际上不会全屏显示。占据屏幕所有位置的是持有它的视图。

// rely on useDimension and screen dimensions since useWindowsDimensions seems to have some issues with iFrames on React 0.63
// https://github.com/facebook/react-native/issues/29451
import { useDimensions } from '@react-native-community/hooks'
import Orientation from 'react-native-orientation-locker'

const windowWidth = useDimensions().screen.width
const windowHeight = useDimensions().screen.height

/** Change the layout when the player goes fullscreen */
  useEffect(() => {

    // constants
    const boxedViewStyle: ViewStyle = {
      position: 'absolute',
      right: 0,
      left: 0,
      zIndex: 1,
    }

    const fullscreenViewStyle: ViewStyle = {
      position: 'absolute',
      top: 0,
      right: 0,
      left: 0,
      bottom: 0,
      zIndex: 2,
    }

    // Do the magic trick to change everything
    if (mounted) {
      if (playerFullScreen) {
        Orientation.lockToLandscape() // View horizontal
        setPlayerViewStyle(fullscreenViewStyle)
        setPlayerWidth(windowWidth)
        setPlayerHeight(windowHeight)
      } else {
        Orientation.lockToPortrait() // View
        setPlayerViewStyle(boxedViewStyle)
        setPlayerWidth(windowWidth)
        setPlayerHeight(PixelRatio.roundToNearestPixel(windowWidth / (16 / 9)))
      }
    }

    return (): void => {
      Orientation.lockToPortrait()
    }

  }, [playerFullScreen, windowHeight, windowWidth])

这是 JSX 的样子：

    return (
      <View style={[styles.playerView, playerViewStyle]}>
        {playerFullScreen && <StatusBar hidden={true} />}
        <YoutubePlayer
          videoId={videoId}
          play={mediaPlayerIsUp}
          onChangeState={onStateChange}
          height={playerHeight}
          initialPlayerParams={{
            preventFullScreen: true,
          }}
          onError={(error): void => {
            console.log('ERROR > MediaPlayerBox > YoutubePlayer: ', error)
          }}
          forceAndroidAutoplay={Platform.OS === 'android'}
        />
        <View style={styles.fullScreen}>
          <TouchableOpacity activeOpacity={0.8} onPress={toggleFullScreen}>
            <Icon path={paths.mdiFullscreen} color={colors.darkGrey} size={40} />
          </TouchableOpacity>
        </View>
        <View style={styles.close}>
          <TouchableOpacity activeOpacity={0.8} onPress={onClose}>
            <Icon path={paths.mdiClose} color={colors.darkGrey} size={40} />
          </TouchableOpacity>
        </View>
      </View>
    )

注意 preventFullScreen 隐藏了播放器的全屏按钮以使用它所替换的按钮。一旦解决了 React Native Youtube Iframe 上的问题，实际上最好在 YouTube 的全屏按钮上使用列表器。

还要注意隐藏状态栏的技巧，让它看起来像全屏。