全屏播放 Youtube iframe

Posted 2023-05-09

【中文标题】全屏播放 Youtube iframe

【英文标题】：Play Youtube iframe full screen

【发布时间】：2017-01-29 20:49:56

【问题描述】：

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

有人吗？

【参考方案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 
    );
);

【讨论】：

感谢您的回复！每当有人开始播放视频时，我都想将视频设置为全屏。此方法只会在单击“其他”按钮时设置视频全屏，对吗？这不是我正在寻找的方法。

event.data -1 表示“未启动”，而不是全屏。要查看所有可能的选项，请查看 YT.PlayerState。没有“全屏”状态

@Bart Burg，我只将函数命名为 fullScreen()

【参考方案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)
              
            

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

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