reactjs YouTube在移动的上嵌入自动播放

xiozqbni  于 2023-03-22  发布在  React
关注(0)|答案(8)|浏览(175)

我使用React设置iframe与youtube视频在页面上正确的大小。所有的工作都很好,但对于手机不工作自动播放选项。
什么是有趣的页面,我有什么作为例子视频它的工作完美.

<iframe type="text/html"  allowTransparency="true"  height="100%" width="100%" preload="metadata" gesture="media" allow="encrypted-media" className="autoplay-iframe"
            src={`https://www.youtube.com/embed/`+this.props.autoplay+`?autoplay=1&version=3&html5=1&hd=1&controls=0&loop=1&playlist=`+this.props.autoplay+`&playsinline=1&rel=0&showinfo=0&modestbranding=1&related=0&enablejsapi=1&origin=`+window.location.hostname} frameborder="0"></iframe>

上面是我的iframe代码。我删除了iframe代码的一部分,但styles属性中只有style。这对自动播放并不重要。其他页面的finally url也可以正常工作。我不知道为什么。有什么提示可以解决这个问题吗?
先谢了。

093gszye

093gszye1#

你将无法实现这一点,因为它是故意禁用所有移动的设备。原因是用户保存Hive数据。它也被引用在this post
视频自动播放不起作用的原因很简单。在iOS和Android中,该功能都是故意为移动的设备设置的disabled。这样做的原因是为了保存移动用户的钱。这类设备(尤其是手机)通常使用按带宽收费的数据连接。它们有数据限制,超过就会产生费用。
这一说法也得到了以下SO帖子的支持。

wgxvkvu9

wgxvkvu92#

我可以在Youtube上播放视频因为在线加载Youtube视频让谷歌和他们的新核心网络活力感到不安,我们实现了一个缩略图占位符,当点击(jQuery)使用Youtube Iframe API启动加载视频。我一开始也无法让它们自动播放。这个问题通过让API嵌入Iframe来解决--没有事先把iframe放好。它可以在iOS Safari、Chrome和Firefox上自动播放。
文件准备就绪时:

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady(yt_id, iframe_id, iframe_width, iframe_height){
    player = new YT.Player(iframe_id, {
        width: iframe_width,
        height: iframe_height,
        videoId: yt_id,
        playerVars: { 'autoplay': 1, 'playsinline': 1 },
            events: {
                'onReady': onPlayerReady
            }
    });
}

function onPlayerReady(event) {
    //event.target.mute();
    event.target.setVolume(70);
    event.target.playVideo();
}

点击事件:

$('.yt_video_link').on('click', function(e) {
    e.preventDefault();
    var div_id      = $(this).attr('id');
    var div_iframe  = div_id + '_iframe';
    var yt_id       = $('#' + div_id).data('ytid');

    $('#' + div_id + ' .yt_video_play').css('display', 'none');

    onYouTubeIframeAPIReady(yt_id, div_iframe, 560, 315);

});

超文本:

<div id='yt_video_desktop' class='yt_video_link mobile_hide' data-ytid='<?=$yt_id?>'>
    <div id='yt_video_desktop_player' class='yt_video'>
        <img src='/catalog/images/yt_video_thumb_<?=$yt_id?>.jpg' alt='play desktop video' width='768' height='432' id='yt_video_desktop_iframe'>
    </div>
    <div class='yt_video_play'></div>
</div>
at0kjp5o

at0kjp5o3#


Google官方声明“由于此限制,autoplay、playVideo()、loadVideoById()等函数和参数将无法在所有移动的环境中工作。
参考:https://developers.google.com/youtube/iframe_api_reference

6mzjoqzu

6mzjoqzu4#

通过添加参数playsinline: 1,我成功地使autoplay在android和ios上工作。

createYoutubePlayer() {
      this.youtubePlayer = new YT.Player('youtubePlayer', {
      videoId: 'YOURID', // YouTube Video ID
      width: 277,               // Player width (in px)
      height: 600,              // Player height (in px)
      playerVars: {
        autoplay: 1,        // Auto-play the video on load
        controls: 0,        // Show pause/play buttons in player
        showinfo: 1,        // Hide the video title
        modestbranding: 1,  // Hide the Youtube Logo
        loop: 1,            // Run the video in a loop
        fs: 0,              // Hide the full screen button
        cc_load_policy: 0, // Hide closed captions
        iv_load_policy: 3,  // Hide the Video Annotations
        autohide: 1,         // Hide video controls when playing
        playsinline: 1, //forbid fullscreen on ios
      },
      events: {
        onReady: (e) => {
          e.target.mute();
        },
        onStateChange: (e) => {this.onPlayerStateChange(e)}
      }
    });
  }
ffvjumwh

ffvjumwh5#

规则已经改变了,所以现在大多数新手机都可以自动播放,但是大多数视频流媒体网站,比如youtube和vimeo还没有启用这个功能,html5视频能用而iframe不能用的原因是youtube禁用了它。

yhived7q

yhived7q6#

对于任何在react native上处理这个问题的人来说,你可以覆盖用户代理,它就像一个魅力:

<WebView 
  userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36" 
  ...
zzoitvuj

zzoitvuj7#

Youtube视频自动播放是工作在这里是代码

<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div class="iframe-container">
  <div id="player"></div>
</div>
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '100%',
      videoId: 'YOUR_VIDEO_ID',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>

<style>
/* Make the youtube video responsive */
  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
k75qkfdt

k75qkfdt8#

视频自动播放不起作用的原因很简单。在iOS和Android中,移动的设备都故意禁用了该功能。这样做的原因是为了保存移动用户的钱。这类设备(尤其是手机)通常使用按带宽收费的数据连接。

相关问题