Javascript - 将youtube / vimeo url转换为嵌入版本，用于论坛评论功能 [英] Javascript - convert youtube/vimeo url's into embed versions for use on a forum comment feature

问题描述

尝试做一些类似facebook的东西。我已经创建了这个javascript url模式转换器。当用户点击论坛帖子的提交按钮时，可以触发这样的事情 - 将url转换为嵌入html变体。有什么方法可以改善这个吗？

Trying to make something similar to facebook. I've created this javascript url pattern converter. Something like this could be triggered just as the user clicks on the submit button for a forum post - convert url's into embed html variants. Any ways to improve this?

http：// jsfiddle .net / 88Ms2 / 377 /

var videoEmbed = {
    invoke: function(){

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

    },
    convertVideo: function(html){
        var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
        var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;

        if(pattern1.test(html)){
            console.log("html", 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)){
              console.log("html", 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);
        } 


        return html;
    }
}






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

推荐答案

最新代码******** < a href =http://jsfiddle.net/88Ms2/378/ =noreferrer> http://jsfiddle.net/88Ms2/378/

LATEST CODE ******** http://jsfiddle.net/88Ms2/378/

这模仿了facebook post功能 - 将youtube，vimeo或image转换为基于媒体的链接。这将非常有用

This mimics the facebook post feature - of turning a youtube, vimeo or image into a media based link. This will be useful in taking on

有兴趣增强代码。

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;
    }
}

这篇关于Javascript - 将youtube / vimeo url转换为嵌入版本，用于论坛评论功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！