Question

我在iframe中有一个嵌入了Youtube视频的页面。我想在有人播放视频时将视频设置为全屏。我尝试了很多东西，但似乎无法让它发挥作用。

我的代码：

<a href="#" class="tablinks active" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

我也尝试用Youtube Api完成这项任务，但没有成功。

<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>

任何？

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的全屏按钮上使用列表器。

请注意还可以隐藏状态栏，使其看起来像全屏一样。

播放Youtube iframe全屏

3 个答案: