默认情况下，YouTube能否在Android上全屏播放？

Question

YouTube嵌入式视频和Vimeo视频之间的行为似乎彼此不同，而且在iOS/Android平台上也有所不同。

我在一个由wordpress插件提供的照明盒中显示视频。视频是通过具有allowfullscreen属性的iframe嵌入的。

在iPhone (使用Chrome浏览器)上，当用户按下YouTube或Vimeo视频播放时，它会自动进入全屏模式。

在安卓手机上(三星Galaxy S6，使用Chrome浏览器)，当用户按下Vimeo上的play时，它也会自动进入全屏模式。当安卓用户在YouTube视频上按下play键时，它将保留在lightbox中，并在下面显示一些控件，并选择进入全屏模式。

以下是一些屏幕截图：

Vimeo

在灯光盒中，在按下播放之前

按下播放后，Vimeo自动转到全屏

​

YouTube

灯箱中的YouTube视频

​

按下play后，YouTube不会自动转到全屏(但它会在iPhone上运行)

​

问题

有没有办法让YouTube在所有设备上都像Vimeo一样运行呢？

Answer 1

请参照以下内容更改代码：

​

$(function(){
  $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

  $(window).resize(function(){
    $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>

​

Answer 2

一定是解决了你的问题，看看这个StackOverFlow的答案-

https://stackoverflow.com/a/20289540/7125023

CODEPEN码;

<h1>One-click play+fullscreen via YouTube API</h1>
Suggested code from this <a href="https://stackoverflow.com/a/20289540/288906">StackOverflow answer</a>

<h2>Instructions</h2>
<ol>
  <li>Click on [play fullscreen]</li>
  <li>Click on the fullscreen button in youtube's player to exit fullscreen</li>
</ol>

<script src="https://www.youtube.com/iframe_api"></script>
<button>play fullscreen</button><br>
<div id="player"></div>

## Safari 8

It works perfectly:

0. Enters fullscreen
0. Exits fullscreen

## Firefox 35

Buggy, annoying but working:

0. Enters fullscreen (on Codepen.io)
0. Enters fullscreen (YouTube.com)
0. Third click: Exits fullscreen

## Chrome 40

Buggy, broken:

0. Enters fullscreen (on Codepen.io)
0. Does nothing
0. Third click: Exits fullscreen but the video fills the iframe, effectively breaking the site. <a href="http://i.imgur.com/CHibfEN.png" target="_blank">Screenshot</a>


## Mobile browsers

This is the default behavior on iPhone, but it cannot work anywhere else (Android, iPad) since 

* to `play()` a video or to `requestFullScreen()` you need a user tap **in the same document** (read: not across the iframe)

This means that

* you can't call `requestFullScreen()` when the video emits the event `onplay`
* you can't trigger `play()` via YouTube API (it would cross the frame) **and** call `requestFullScreen()` in the same tap

So with one tap **either** you play the video **or** get it fullscreen; you'll always need two separate taps if you use YouTube.

CSS

html {
  padding: 1em;
}
button {
  width: 200px;
  height: 100px;
  margin-bottom: 1em;
}

主JAVASCRIPT

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}

Answer 3

在Android系统中，您可以使用Youtubeapi并检查全屏视频的默认设置，但是是的，底部有全屏按钮。

在布局xml中使用webview

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical" >
                 <com.google.android.youtube.player.YouTubePlayerView
                      android:id="@+id/youtube_view"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent" />
    </RelativeLayout>

在代码部分中使用下面的代码

public class YouTubeVideoPlayer extends YouTubeBaseActivity implements YouTubePlayer.OnInitializedListener {
    public static final String API_KEY = "<creae key from dev consol";


    public static final String VIDEO_ID = "<your youtube video id";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /** attaching layout xml **/
        setContentView(R.layout.activity_youtube_webview);

        /** Initializing YouTube player view **/
        YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById(R.id.youtube_view);
        youTubePlayerView.initialize(API_KEY, this);
    }

    @Override
    public void onInitializationFailure(YouTubePlayer.Provider provider, YouTubeInitializationResult result) {
        Toast.makeText(this, "Failured to Initialize!", Toast.LENGTH_LONG).show();
    }

    @Override
    public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer player, boolean wasRestored) {
        /** add listeners to YouTubePlayer instance **/
        player.setPlayerStateChangeListener(playerStateChangeListener);
        player.setPlaybackEventListener(playbackEventListener);

        /** Start buffering **/
        if (!wasRestored) {
            player.cueVideo(VIDEO_ID);
        }
    }

    private YouTubePlayer.PlaybackEventListener playbackEventListener = new YouTubePlayer.PlaybackEventListener() {

        @Override
        public void onBuffering(boolean arg0) {
        }

        @Override
        public void onPaused() {
        }

        @Override
        public void onPlaying() {
        }

        @Override
        public void onSeekTo(int arg0) {
        }

        @Override
        public void onStopped() {
        }

    };

    private YouTubePlayer.PlayerStateChangeListener playerStateChangeListener = new YouTubePlayer.PlayerStateChangeListener() {

        @Override
        public void onAdStarted() {
        }

        @Override
        public void onError(YouTubePlayer.ErrorReason arg0) {
        }

        @Override
        public void onLoaded(String arg0) {
        }

        @Override
        public void onLoading() {
        }

        @Override
        public void onVideoEnded() {
        }

        @Override
        public void onVideoStarted() {
        }
    };

}