时间戳

首页 > 解决方案 > Facebook Video Embed API allowfullscreen=false 不起作用，这使得 .play() 函数抛出错误

reactjs - Facebook Video Embed API allowfullscreen=false 不起作用，这使得 .play() 函数抛出错误

问题描述

我正在尝试在我的移动网站上嵌入 facebook 视频，并使用此处记录的他们的 Video API来做到这一点。

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

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

加载的 iframe 有 allowfullscree=true 即使我给了 false

我正在使用 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() 播放视频，并且不允许它全屏播放。

标签： reactjsfacebookfacebook-javascript-sdkfullscreenvideo-embedding

解决方案

Facebook 似乎确实根据设备类型做了一些不同的事情（您可以通过使用 chrome 开发工具 - 设备工具栏 - 并在移动（无触摸）和桌面设备类型之间切换来测试这一点。嵌入式播放器在两个版本之间看起来不同，并且移动设备似乎调用 requestfullscreen 无论 data-allowfullscreen 是打开还是关闭。据我所知，该 data-allowfullscreen 似乎唯一影响的事情是在桌面上，那里有一个全屏按钮根据该标志显示或隐藏的视频底部。

Facebook 嵌入式视频有一个非常令人沮丧和错误的 api。他们需要赶上 Youtube 和 Vimeo 播放器。

推荐阅读