youtube 使用播放列表嵌入单个视频循环显示两次相同的视频 [英] youtube embed single video loop with playlist shows twice the same video

查看：20 发布时间：2022/1/6 16:17:32 video youtube embed playlist
本文介绍了youtube 使用播放列表嵌入单个视频循环显示两次相同的视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

我正在尝试使用循环模式嵌入 YouTube 视频，为此我必须设置播放列表参数，否则将无法工作:
问题是当我这样做时，我得到一个包含 2 个视频的播放列表，同一个视频出现了两次，这会产生非常糟糕的视觉效果，因为我希望一个视频无休止地循环播放.
关于如何做到这一点的任何建议?谢谢
这是我的代码:
</pre><p></p><div class="h2_lin"> 解决方案 </div><p>我不认为以下信息实际上记录在某处，但我想分享我通过在 URL 中进行一些测试来尝试解决您的问题".</p><小时><p>说到这里，你就可以解决你的问题"——<em>(即:<code>显示相同的视频两次</code>)</em>——通过如下修改网址:</p><pre><code>https://www.youtube.com/embed/VIDEO_ID_1/?playlist=VIDEO_ID_2&amp;autoplay=1&amp;loop=1&amp;rel=0&amp;showinfo=0&amp;color=white</code></pre><p>说明:</p><ul><li><strong><code>VIDEO_ID_1</code></strong>:对应于旨在连续播放的 <code>videoId</code> - <em>(循环中)</em>.</li><li><strong><code>VIDEO_ID_2</code></strong>:对应于 <strong><code>VIDEO_ID_1</code></strong> 中使用的 <code>videoId</code>，但是最后一个字母变了.这个想法是<strong>设置一个不存在的<code>videoId</code></strong>.</li></ul><p>所以，有了前面的解释，你可以用下面的视频作为例子:</p><块引用><p>视频:<a href="https://www.youtube.com/watch?v=QwS1r1mc888" rel="nofollow noreferrer">堆栈溢出 10！</a></p><p>videoId:<code>QwS1r1mc888</code></p></blockquote><p>修改后的网址显示如下:</p><pre><code>https://www.youtube.com/embed/QwS1r1mc888?enablejsapi=1&amp;loop=1&amp;playlist=QwS1r1mc880&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;color=white</code></pre><p><块引用><p>注意 videoId <code>QwS1r1mc880</code> 不存在 <em>(yet)</em> - 您也可以将这个值替换为 <code>15874598752</code> - 这永远不会是YouTube <code>videoId</code> <em>(据我所知)</em>.</p></blockquote><p><小时><p>旁注:我真的希望这个发现不会被删除.</p><p>I am trying to embed a YouTube video with loop mode on, and to do so I have to set the playlist parameter otherwise it won't work:</p>

<p><a href="https://developers.google.com/youtube/player_parameters?#loop" rel="nofollow noreferrer">documentation</a></p>

<p>The problem is when I do so i get a playlist with 2 videos on it, the same video appearing twice, which produces a very bad visual effect since i want one video to loop endlessly.</p>

<p>Any suggestions on how to do so? Thanks</p>

<p>Here's my code:</p><pre><code>&lt;iframe width="600" height="338" 
src="https://www.youtube.com/embed/VIDEO_ID/?playlist=VIDEO_ID&amp;autoplay=1&amp;loop=1&amp;rel=0&amp;showinfo=0&amp;color=white" 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
</code></pre><p>
</p><div class="h2_lin"> 解决方案 </div><p>I don't think the following information is actually documented somewhere, but I want share the discovery I made by making some tests in the URL for trying solve your "problem".</p>

<hr>

<p>Saying this, you can remove your "problem" - <em>(which is: <code>displaying the same video twice</code>)</em> - by modifying the URL as follows:</p><pre><code>https://www.youtube.com/embed/VIDEO_ID_1/?playlist=VIDEO_ID_2&amp;autoplay=1&amp;loop=1&amp;rel=0&amp;showinfo=0&amp;color=white
</code></pre><p>Explanation:</p>

<ul>
<li><strong><code>VIDEO_ID_1</code></strong>: Corresponds to the <code>videoId</code> intended to play continuously - <em>(in loop)</em>.</li>
<li><strong><code>VIDEO_ID_2</code></strong>: Corresponds to the <code>videoId</code> usted in the <strong><code>VIDEO_ID_1</code></strong>, BUT with the last letter changed. The idea is <strong>set a <code>videoId</code> that does not exist</strong>.</li>
</ul>

<p>So, with the previous explanation, you can use the following video as an example:</p><blockquote>
  <p>Video: <a href="https://www.youtube.com/watch?v=QwS1r1mc888" rel="nofollow noreferrer">Stack Overflow is 10!</a></p>
  
  <p>videoId: <code>QwS1r1mc888</code></p>
</blockquote><p>The modified URL shows the following:</p><pre><code>https://www.youtube.com/embed/QwS1r1mc888?enablejsapi=1&amp;loop=1&amp;playlist=QwS1r1mc880&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;color=white
</code></pre><p>

</p><blockquote>
  <p>N.B that the videoId <code>QwS1r1mc880</code> does not exist <em>(yet)</em> - you could also replace this value for <code>15874598752</code> - which will never be a YouTube <code>videoId</code> <em>(as far as I know)</em>.</p>
</blockquote><p>

<hr>

<p>Side note: I really hope this discovery won't be removed.</p>

                        <p>这篇关于youtube 使用播放列表嵌入单个视频循环显示两次相同的视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2777063');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="youtube嵌入带有播放列表的单个视频循环，显示同一视频的两倍" href="/2063349.html">
                            youtube嵌入带有播放列表的单个视频循环，显示同一视频的两倍;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="检索单个YouTube视频播放列表并显示其所有视频" href="/1175120.html">
                            检索单个YouTube视频播放列表并显示其所有视频;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="嵌入 Youtube 播放列表但从随机视频开始" href="/2507489.html">
                            嵌入 Youtube 播放列表但从随机视频开始;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="嵌入 Youtube 播放列表，但从随机视频开始" href="/2840254.html">
                            嵌入 Youtube 播放列表，但从随机视频开始;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何将 youtube 视频嵌入播放列表" href="/2840192.html">
                            如何将 youtube 视频嵌入播放列表;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何将 YouTube 视频嵌入为播放列表" href="/2507472.html">
                            如何将 YouTube 视频嵌入为播放列表;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在嵌入式 YouTube 视频中播放播放列表的特定视频" href="/2507736.html">
                            如何在嵌入式 YouTube 视频中播放播放列表的特定视频;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用播放列表网址获取YouTube视频" href="/111372.html">
                            使用播放列表网址获取YouTube视频;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Youtube 获取视频和播放列表帐户" href="/2507733.html">
                            Youtube 获取视频和播放列表帐户;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="循环播放嵌入式YouTube视频" href="/869257.html">
                            循环播放嵌入式YouTube视频;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 YouTube 播放列表嵌入代码的末尾隐藏相关视频?" href="/2697767.html">
                            如何在 YouTube 播放列表嵌入代码的末尾隐藏相关视频?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在YouTube播放列表嵌入代码的末尾隐藏相关视频？" href="/2063284.html">
                            如何在YouTube播放列表嵌入代码的末尾隐藏相关视频？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何获取带有视频标题的youtube播放列表视频ID" href="/2103621.html">
                            如何获取带有视频标题的youtube播放列表视频ID;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从 YouTube 播放列表中获取视频 ID" href="/2507722.html">
                            从 YouTube 播放列表中获取视频 ID;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从YouTube播放列表的视频获取，使用jQuery，API" href="/223846.html">
                            从YouTube播放列表的视频获取，使用jQuery，API;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="youtube api 播放列表项已删除的视频" href="/2507850.html">
                            youtube api 播放列表项已删除的视频;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="JavaScript播放管理对Vimeo播放列表*和* YouTube视频？" href="/222500.html">
                            JavaScript播放管理对Vimeo播放列表*和* YouTube视频？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用 Python 将 youtube 视频添加到播放列表" href="/2507794.html">
                            使用 Python 将 youtube 视频添加到播放列表;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用 Youtube API 将视频添加到播放列表" href="/2507921.html">
                            使用 Youtube API 将视频添加到播放列表;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Youtube 嵌入的播放列表显示播放按钮而不是第一个视频" href="/2507562.html">
                            Youtube 嵌入的播放列表显示播放按钮而不是第一个视频;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何从 YouTube 播放列表中获取视频 ID?" href="/2777047.html">
                            如何从 YouTube 播放列表中获取视频 ID?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何从YouTube播放列表中获取视频ID?" href="/2284020.html">
                            如何从YouTube播放列表中获取视频ID?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用侧列表托盘嵌入 youtube 播放列表" href="/2777110.html">
                            使用侧列表托盘嵌入 youtube 播放列表;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="YouTube API - 使用播放列表查询获取所有视频的标签" href="/2507643.html">
                            YouTube API - 使用播放列表查询获取所有视频的标签;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用Angular JS获取播放列表中的所有YouTube视频" href="/1927347.html">
                            使用Angular JS获取播放列表中的所有YouTube视频;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>其他开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="拒绝显示一个框架，因为它将&#39;X-Frame-Options&#39;设置为&#39;sameorigin&#39;" href="/893060.html">
                            拒绝显示一个框架，因为它将&#39;X-Frame-Options&#39;设置为&#39;sameorigin&#39;;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html">
                            什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在运行npm install命令时获取&#39;npm WARN弃用&#39;警告" href="/840917.html">
                            在运行npm install命令时获取&#39;npm WARN弃用&#39;警告;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="cmake无法找到openssl" href="/516280.html">
                            cmake无法找到openssl;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html">
                            从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Twitter :: Error :: Forbidden  - 无法验证您的凭据" href="/630061.html">
                            Twitter :: Error :: Forbidden  - 无法验证您的凭据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html">
                            我什么时候需要一个fb：app_id或者fb：admins？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将.db文件导入R" href="/902960.html">
                            将.db文件导入R;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html">
                            npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src&#39;self&#39;”" href="/819167.html">
                            拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src&#39;self&#39;”;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = 'youtube,使用,播放列表,嵌入,单个,视频,循环,显示,两次,相同,的,视频'; var cat = 'cc';';//other-dev</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>