Question

我需要在观看视频后隐藏相关视频。我设置rel=0，但它不起作用。我正在使用this page进行测试。观看视频后，rel复选框值不会影响显示的相关视频。

它在谷歌浏览器中不起作用。在mozilla firefox中它可以正常工作。

Answer 1

自2018年9月25日起，您将无法禁用相关视频。相反，如果rel参数设置为0，则相关视频将与刚刚播放的视频来自同一频道。 YouTube API

Answer 2

YouTube changed the rel=0 parameter截至2018年9月，因此它不再完全禁用相关视频。

但是，您可以使用YouTube Player API来解决此问题，以显示自定义HTML而不是相关视频。

以下是一些示例代码，该视频在制作完成后会在视频上显示自定义的“重播”按钮，从而隐藏相关视频：

<style>
    #playerWrap {
        display: inline-block;
        position: relative;
    }
    #playerWrap.shown::after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 64px 64px;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
    }
</style>
<div>
    <div id="playerWrap">
        <iframe
            width="640" height="360"
            src="https://www.youtube.com/embed/0sDg2h3M1RE?enablejsapi=1"
            frameborder="0"
        ></iframe>
    </div>
</div>
<script>
  var playerFrame = document.currentScript.previousElementSibling.children[0].children[0];

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

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(playerFrame, {
      videoId: 'M7lc1UVf-VE',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        document.getElementById("playerWrap").classList.add("shown");
    }
  }

  document.getElementById("playerWrap").addEventListener("click", function() {
    player.seekTo(0);
    document.getElementById("playerWrap").classList.remove("shown");
  });
</script>

有关缩小的代码以及进一步的说明，详细信息和说明，view my blog post on the subject。

Answer 3

如果您想隐藏相关视频，则在播放器状态结束时应调用“ player.stopVideo（）”“ PlayerState.ENDED”。

PS：对不起，英语不是我的母语。

Answer 4

我没有工作，因为代码从开发页面https://developers.google.com/youtube/youtube_player_demo

吐出

不完整，错过了结束标记！

Answer 5

这是因为您最有可能在Chrome浏览器上登录，但没有在Firefox浏览器上登录。

&rel=0仅在未登录时有效。但是，您可以使用增强型隐私模式来解决此问题：

https://www.youtube-nocookie.com/embed/[id]?rel=0

Answer 6

在这里我找到了解决方案。播放器状态下的stopVideo更改为ENDING

<!DOCTYPE html>
<html>
<head>
    <title>Alternative to hide Related Video & Info</title>
    <script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>

<div id="playerWrapOuter">
    <div id="playerWrap">
        <?php 
            $embed = '<iframe width="560" height="315" src="https://www.youtube.com/embed/HjxYvcdpVnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
            preg_match('/src="(.+?)"/', $embed, $matches);
            $src = $matches[1];
            $params = array(
                'width'          => "640",
                'height'         => "360",
                'enablejsapi'    => 1,
                'rel'            => 0,
                'modestbranding' => 1,
                'showinfo'       => 0,
            );


            $querystring  = http_build_query($params, $src);
            $new_src = $src.'?'. $querystring;
            $embed = str_replace($src, $new_src, $embed);
            $embed = str_replace( '<iframe ', '<iframe ', $embed );

            echo $embed; 
        ?>
    </div>
</div>
<script>
    (function() {
        var player;
        var playerFrame = document.currentScript.previousElementSibling.querySelector("iframe");

        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player(playerFrame, {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        };
        window.onPlayerStateChange = function(event) {
            if (event.data == YT.PlayerState.ENDED) {
                player.stopVideo();
            }
        };

    })();
</script>
</body>
</html>

这是一个小提琴演示：https://jsfiddle.net/Aishan/znabhuo2/ 希望对您有帮助！

Answer 7

如上文Irina Kovalchuk所述，截至2018年9月25日，您将无法禁用相关视频。

但是我找到了一种解决方法：

public class favaoritesFragment extends Fragment {
    public static TextView data;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.fragment_favorites,container,false);
        RecyclerView  mRecyclerView = view.findViewById(R.id.recyclerView);
        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));

        mRecyclerView.setAdapter(mAdapter);
        ArrayList<Status> statusArrayList = new ArrayList<>();
        statusArrayList.add(new Status(R.drawable.ic_action_name,"Line2","Line3"));
        statusArrayList.add(new Status(R.drawable.common_google_signin_btn_icon_dark_focused,"Line2","Line3"));
        statusArrayList.add(new Status(R.drawable.ic_action_name,"Line2","Line3"));

        mAdapter = new RecyclerAdapter(statusArrayList);
        mAdapter.notifyDataSetChanged();
  　　　return view;
    }

}

视频到达终点时，移动搜索指针开始。它不会花时间显示相关视频。 如果您要循环播放视频，

Answer 8

使用Chrome和Opera检查这一点，它可以正常工作。

https://jsfiddle.net/o8ztczn6/

<iframe width="560" height="315" src="https://www.youtube.com/embed/6UVZpQ8cLSQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

完成时未显示相关视频。

youtube iframe api参数rel = 0不起作用

8 个答案: