Question

我一直在网上搜索，但没有任何可行的，因为我打算。我想要的是我有一个文本域，用户可以传递youtube视频的URL（在后端），然后在前端我希望显示该视频使用该URL。关键是它不会显示视频。当我使用iFrame它可以工作，但它需要像这样嵌入的网址

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

它工作正常但是你看到网址不是你从网址栏复制/粘贴的一般网址。

视频的网址是：

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

所以我想要的就像这样：

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

我不知道是否有插件，你可以粘贴网址并播放，或者我缺少什么，但线索或任何帮助都会很适应。

Answer 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>

我在这里没有包含验证部分。

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

Answer 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/

只需传递视频网址即可播放Youtube视频

2 个答案: