将youtube / vimeo网址转换为嵌入式视频

时间:2015-07-10 21:16:37

标签: youtube vimeo

我发现此代码可将youtube / vimeo网址转换为嵌入式视频。

Javascript - convert youtube/vimeo url's into embed versions for use on a forum comment feature

我正在尝试在使用TinyMCE的CMS中使用它。 TinyMCE在网址周围包含段落标记。虽然这不会影响YouTube网址,但会打破Vimeo网址。

这方面的小提琴就在这里:http://jsfiddle.net/88Ms2/378/

    var videoEmbed = {
    invoke: function(){

        $('body').html(function(i, html) {
            return videoEmbed.convertMedia(html);
        });

    },
    convertMedia: function(html){
        var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
        var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;
        var pattern3 = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;

        if(pattern1.test(html)){
           var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

           var html = html.replace(pattern1, replacement);
        }


        if(pattern2.test(html)){
              var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
              var html = html.replace(pattern2, replacement);
        } 


        if(pattern3.test(html)){
            var replacement = '<a href="$1" target="_blank"><img class="sml" src="$1" /></a><br />';
            var html = html.replace(pattern3, replacement);
        } 






        return html;
    }
}






setTimeout(function(){
    videoEmbed.invoke();
},3000);

在小提琴示例中,如果您在html中的vimeo网址周围添加段落标记并运行代码,则不再显示vimeo视频。我注意到链接之前的标签或任何文本都没问题,但链接之后的任何内容,任何文本或标签(在同一行上)都会破坏它。

有关如何解决此问题的任何建议?

谢谢!

1 个答案:

答案 0 :(得分:0)

<?php
 function videoType($url) {
if (strpos($url, 'youtube') > 0)
{   // https://www.youtube.com/watch?v=YKKMtGhVdhc
    $youtube_url = 'https://www.youtube.com/embed/';
    // Now get the 'v=' value & stick on the end
    preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $matches);
    $v = $matches[1];
    // Final result
    return '<div class="videoWrapper"><iframe src="'. $youtube_url . $v . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
}
elseif (strpos($url, 'vimeo') > 0)
{   // https://player.vimeo.com/video/116582567
    $vimeo_url = 'https://player.vimeo.com/video/';
    // Now get the last part of the url
    $v = substr( strrchr(  $url, '/' ), 1 );
    // Final result
    return '<div class="videoWrapper"><iframe src="'. $vimeo_url . $v . '" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>';
}
else if (strpos($url, 'matterport') > 0)
{   // https://my.matterport.com/show/?m=uRGXgoiYk9f
    $matterport_url = 'https://my.matterport.com/show/';
    // Now get the last port of the url
    $v2 = (explode("/", $url));
    $v = end($v2);
    // Fina result
    return '<div class="videoWrapper"><iframe src="' . $matterport_url . $v . '" frameborder="0" allowfullscreen allow="vr"></iframe></div>';
}
else
{
    return false;
}}  ?>

我创建了一个解决方案,可以在PHP中创建3种不同类型的嵌入式视频