javascript - 将多个 youtube/vimeo 链接变成嵌入式播放器

Question

所以我试图将多个链接转换为 youtube/vimeo 嵌入 iframe。

它似乎适用于 messageText div 中的单个视频，但是当我添加多个视频时，链接会中断。

Heres a JSFiddle of the code

<div class="messageText"> 
LOOK AT ME!!! youtube.com/watch?v=8tv-e9DJqK4 youtube.com/watch?v=8tv-e9DJqK4    youtube.com/watch?v=8tv-e9DJqK4
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.messageText').html(function(i, html) {

address = html.replace(/(?:http:\/\/|https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen id="videoPlayer" ></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe id="videoPlayer" src="//player.vimeo.com/video/$1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');    
alert(address);
return address;
});
});
 </script>

就像我说的，我试图让任何 youtube、vimeo 链接转换为嵌入式播放器，无论 div 中有多少视频。在此先感谢您的帮助!

Answer 1

实际上，您使用的是贪婪的运算符，而您捕获的内容不正确，对您的正则表达式进行一些修改就可以解决问题:

用这个

(?:http:\/\/|https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.*?)([^\s]+)

但是，您实际上不需要纠正这么长的正则表达式，您可以使用前瞻来代替。暂时这对你有用..

同样，您也可以找出 vimeo :)

更新 fiddle : http://jsfiddle.net/3Rb5H/2/

干杯!