只需传递视频 URL 即可播放 Youtube 视频

Posted 2023-05-08

【中文标题】只需传递视频 URL 即可播放 Youtube 视频

【英文标题】：Play Youtube Videos just by Passing Video URL

【发布时间】：2014-06-16 15:33:54

【问题描述】：

我一直在网上搜索，但没有按我的意图工作。我想要的是我有一个文本字段，用户可以在其中传递 youtube 视频的 URL（在后端），然后在前端我希望显示该视频以使用该 URL。关键是它不会显示视频。当我使用 iFrame 时它可以工作，但它需要像这样嵌入的 url

<iframe   src="http://www.youtube.com/embed/vM89zeKimOY" frameborder="0" allowfullscreen></iframe>

它工作正常，但正如您所见，该 url 不是您从 url 栏中复制/粘贴的一般 url。

视频的网址是这样的：

https://www.youtube.com/watch?v=vM89zeKimOY

所以我想要的是这样的：

<iframe   src="https://www.youtube.com/watch?v=vM89zeKimOY" frameborder="0" allowfullscreen></iframe>

我不知道是否有一个插件，您可以在其中粘贴 url 并播放，或者我缺少什么，但如果提供线索或任何帮助将不胜感激。

【问题讨论】：

仔细看，你会发现嵌入的链接可以很容易地连接起来。只需在 v=? 之后取代码？并将其放置在嵌入式链接模板中：https://www.youtube.com/embed/ + THECODE

@kikyalex 我该怎么做？

【参考方案1】：

使用 jquery 你可以简单地实现它。

html

<input id="TextBoxURL" />
    <br />
    <div id="iframe">        
    </div>

脚本

<script type="text/javascript">
        $(document).ready(function () 

            $('#TextBoxURL').change(function () 
                var youTubeUri = $('#TextBoxURL').val();
                var youTubeVideoId = get_youtubeId(youTubeUri);
                loadYouTubeVideo(youTubeVideoId);
            ); 
        );

        function get_youtubeId(url) 
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
            var match = url.match(regExp);
            if (match && match[2].length == 11) 
                return match[2];
             else 
                //error
            
        

        function loadYouTubeVideo(id)
            $('#iframe').append("<iframe width='560' height='315' src='//www.youtube.com/embed/"+id+"' frameborder='0' allowfullscreen></iframe>");
        
    </script>

我没有在此处包含验证部分。

干杯。快乐编码..!!!

【讨论】：

感谢您的代码Shana，我想知道如何将这段代码编写为动态的，就像我从数据库中读取变量然后显示它一样，但前提是设置了变量，如果没有然后设置在视频的位置以显示图像。 ???

【参考方案2】：

var NormalLink = "https://www.youtube.com/watch?v=vM89zeKimOY";
var theCode = NormalLink.substring(NormalLink.indexOf('?v=')+3);
var embedded = 'https://www.youtube.com/embed/'+theCode;       

FiddleLink：http://jsfiddle.net/swm7v/2/

【讨论】：

非常感谢您的回复。可以用php写吗？

只需将 javascript 变量替换为 php 变量。 <?php$NormalLink = "https://www.youtube.com/watch?v=vM89zeKimOY";$theCode = $NormalLink.substr(strpos($NormalLink,('?v='))+3);$embedded = 'https://www.youtube.com/embed/'+$theCode; ?>