Facebook视频嵌入API allowfullscreen = false无效，这会导致.play（）函数引发错误

Question

我正在尝试将Facebook视频嵌入到我的移动网站上，并使用他们的Video API documented here来做到这一点。

我已经按照说明初始化了视频播放器，并创建了播放和暂停按钮来控制视频，但是当我使用播放按钮时，出现错误Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

我尝试制作data-allowfullscreen="false"但这似乎不起作用，因为加载的iframe包含allowfullscreen="true"看下面的图片，我的图片为false，但加载的iframe的图片为true

Loaded iframe has allowfullscree=true even though I gave false in

我正在使用React并为此创建了一个简单的组件

import React, { Component } from 'react';
import { Container, Button } from 'react-bootstrap';

class Vidtest extends Component {

    handlePlayVideo = () => {
        window.my_video_player.play(); 
    }

    handlePauseVideo = () => {
        window.my_video_player.pause();
    }   

    render() {
        return(
            <React.Fragment>
                <div style={{position:"relative", width:"100%"}}>
                    <div id="video_div"
                    className="fb-video" 
                    data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
                    data-width="500" 
                    data-allowFullScreen="false"
                    >
                    </div>
                    <Button className="btn btn-primary" onClick={this.handlePlayVideo}>Play Video</Button>
                    <Button className="btn btn-primary" onClick={this.handlePauseVideo}>Pause Video</Button>
                </div>
            </React.Fragment>
        );
    }
}

export default Vidtest

并且已经在我的index.html中初始化了FB视频播放器

<div id="root"></div>
let my_video_player
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{my-app-id}',
      xfbml      : false,
      version    : 'v7.0'
    });

    // Get Embedded Video Player API Instance

    FB.Event.subscribe('xfbml.ready', function(msg) {
      if (msg.type === 'video') {
        my_video_player = msg.instance;
        console.log(msg.id);
        console.log('my_video_player created lfakjd');
      }
    });
  };
</script>

<script 
  async 
  defer 
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_GB/sdk/debug.js#xfbml=1&version=v7.0&appId={my-app-id}&autoLogAppEvents=1">
</script>

有人可以在这里帮助我解决问题吗？？

我想使用my_video_player.play（）播放视频，但不允许全屏播放。

Answer 1

Facebook显然似乎根据设备类型做了不同的操作（您可以通过使用chrome开发工具-设备工具栏-并在移动（非触摸）和台式机设备类型之间进行切换来进行测试。嵌入式播放器在两者之​​间看起来有所不同版本，无论数据允许全屏是打开还是关闭，移动设备似乎都调用requestfullscreen。据我所知，数据允许全屏似乎唯一影响的就是台式机，那里有一个全屏按钮在基于该标志显示或隐藏的视频底部。

Facebook嵌入式视频具有非常令人沮丧且有故障的api。他们需要赶上YouTube和Vimeo播放器。