Ueditor 富文本編輯器 插入 m3u8 和 mp4 視頻（PHP）

當(dāng)前環(huán)境：PHP、Ueditor的版本是1.4.3

新的需求是，需要在Ueditor 富文本編輯器中，插入視頻播放，并且視頻格式有MP4，也有M3U8。

百度編輯器默認(rèn)的是embed，需要修改下配置。 ueditor.all.js 和 ueditor.config.js 這兩個(gè)文件要改一些東西，具體我這里就不展示了，網(wǎng)上有很多文章都有寫(xiě)。

注意：

創(chuàng)建插入視頻字符串，這里也需要判斷m3u8，mp4

case 'video':
                var ext = url.substr(url.lastIndexOf('.') + 1);
                if(ext == 'ogv') ext = 'ogg';
                // str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                //     ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                //     '<source src="' + url + '" type="video/' + ext + '" /></video>';
                // break;
                if (ext == 'm3u8') {
                    str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js vjs-default-skin vjs-big-play-centered" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls=""  width="' + width + '" height="' + height + '" data-setup="{}">' +
                    '<source src="' + url + '" type="application/x-mpegURL" /></video>';
                } else {
                    str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                    '<source src="' + url + '" type="video/' + ext + '" /></video>';
                }
                break;

如圖：


QQ截圖20230504170120.png

這里主要說(shuō)下 video 文件夾中的修改（ueditor\dialogs\video）。

先說(shuō) video.js 文件，一般的方法是修改 function createPreviewVideo(url) 方法，把 $G("preview").innerHTML 原有的修改為：

$G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';

看圖：


QQ截圖20230426145313.png

回到編輯器中操作插入視頻功能，MP4格式的沒(méi)問(wèn)題，預(yù)覽的時(shí)候可以播放，插入到編輯器后也可以播放；但是M3U8格式的視頻不行，預(yù)覽和插入后都不能播放。

在 video.html 頁(yè)面中添加插件videojs：

<link rel="stylesheet" href="/share/js/video/video-js.css">
<script src="/share/js/video/video.min.js"></script>

也不行，好像是js沒(méi)起作用。

視頻彈出框 ：


QQ截圖20230426152125.png

富文本編輯器中：


QQ截圖20230426152147.png

在本地靜態(tài)頁(yè)面測(cè)試的時(shí)候發(fā)現(xiàn) m3u8 格式的 video 標(biāo)簽，要有type屬性：type="application/x-mpegURL"，但是 mp4 格式的加上“application/x-mpegURL”，卻不能播放了。

所以在 video.js 里面寫(xiě)了一個(gè)判斷，根據(jù)視頻格式寫(xiě)不同的 type：

       $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+if (conUrl.substr(-3) == '3u8') {
            $G("preview").innerHTML = '<video class="previewVideo video-js" controls="" data-setup="{}" style="width:420;height:280" id="1"><source src='+conUrl+' type="application/x-mpegURL"></source></video>';
            var vid = document.getElementById('preview');
            var player = videojs(vid);
        } else {
            $G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';
        }

重新插入 m3u8 格式的視頻，發(fā)現(xiàn)預(yù)覽和插入后還是不能播放，mp4格式的視頻在預(yù)覽和插入后都可以播放。

抱著試一試的想法，點(diǎn)了提交按鈕，發(fā)現(xiàn)在預(yù)覽頁(yè)面中可以播放，前提是要在預(yù)覽頁(yè)（detail.php）中引用videojs

<link rel="stylesheet" href="/share/js/video/video-js.css">
<script src="/share/js/video/video.min.js"></script> 
<script>
    $('video.video-js').each(function(i, e) {
        var id = e.id
        var vid = document.getElementById(id);
        var player = videojs(vid);
    })
</script>

如圖：


QQ截圖20230426171008.png

同理，在前臺(tái)頁(yè)面中引用video.js，也可以播放 m3u8 的視頻，只是不能在編輯的時(shí)候播放。

但是還有個(gè)問(wèn)題，如果插入多個(gè)m3u8的視頻，它們的id都是一樣的，只有一個(gè)視頻可以播放

QQ截圖20230426162657.png

我想在 ueditor.all.js 文件中發(fā)現(xiàn)視頻部分在前面修改的時(shí)候被注釋掉了，打開(kāi)就可以了：


QQ截圖20230426163136.png

效果如圖：


微信圖片編輯_20230427092112.jpg

修改下js代碼，功能是播放其中一個(gè)視頻的時(shí)候，其他視頻都暫停播放：

$('video.video-js').each(function(i, e) {
        var id = e.id
        var vid = document.getElementById(id);
        videojs(vid).ready(function(){
        this.on("play", function(e) {
            //pause other video
            $(".video-js").each(function (index) {
                if (i !== index) {
                    this.player.pause();
                }
            });
        });
    });
})

初步實(shí)現(xiàn)了需求，只是在視頻彈出框預(yù)覽時(shí)，和在ueditor編輯器中不能播放m3u8的視頻，但是mp4的視頻都可以播放；而在后臺(tái)預(yù)覽頁(yè)，與前臺(tái)正式頁(yè)面中，視頻的播放都沒(méi)有問(wèn)題。

進(jìn)一步優(yōu)化

QQ截圖20230426164451.png

視頻彈出框中底部的按鈕，我實(shí)在沒(méi)有找到在哪里定義，或者封裝的，就想了一個(gè)比較笨的方法，把原始的按鈕注釋掉，自己重新寫(xiě)2個(gè)按鈕，實(shí)現(xiàn)預(yù)覽和插入功能。

ueditor.css修改：

.edui-default .edui-dialog-foot {
    background-color: white;
    display: none; /* 隱藏視頻彈窗底部按鈕 */
}

video.html修改：

<!--把div改下-->
<video-js id="preview" class="vjs-default-skin vjs-big-play-centered" controls preload="auto" width="420" height="280">

</video-js>

<!--自己定義的按鈕-->
<div>
      <input type="button" id="btn_preview" value="預(yù)覽" />
      <input type="button" id="btn_insert" value="確認(rèn)" />
</div>

<!--js代碼-->
<script>
    $(function () {
        $("#btn_preview").click(function () {
            var url = $("#videoUrl").val();
            if (url.substr(-3) == '3u8') {
                $("#preview").html('<source src="' + url + '" type="application/x-mpegURL">');
                var vid = document.getElementById('preview');
                var player = videojs(vid);
            } else {
                $G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+url+'" style="width:420;height:280 "></video>';
            }
        });
        $("#btn_insert").click(function () {
            var url = $("#videoUrl").val();
            if (url.substr(-3) == '3u8') {
                var guid = generateGUID();           
                var html = '<video class="video video-js vjs-default-skin vjs-big-play-centered" id="' + guid + '" controls preload="auto" width="420" height="280">' +
                ' <source src="' + url + '" type="application/x-mpegURL" />' +
                '</video>' 
            } else {
                var html = '<video controls preload="auto" width="420" height="280">' +
                ' <source src="' + url + '" />' +
                '</video>'
            }
            UE.getEditor('content_content_main').execCommand('insertHtml', html);
        });

        function generateGUID() {
        　return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
         });
        }
});
</script>

video.js修改：


QQ截圖20230426165517.png

QQ截圖20230426165447.png

QQ截圖20230426165642.png

重新插入m3u8視頻：預(yù)覽效果


微信圖片編輯_20230427091917.jpg

到此，視頻彈窗的預(yù)覽效果實(shí)現(xiàn)了，不過(guò)還有一個(gè)問(wèn)題，就是視頻插入后，在富文本編輯器中還是不能播放m3u8的視頻。

有什么好的方案歡迎給我留言。

補(bǔ)充：不用自定義預(yù)覽和確認(rèn)按鈕，用原始的按鈕也可以實(shí)現(xiàn)在預(yù)覽時(shí)播放視頻（上面優(yōu)化的部分不用改，只做下面修改）

video.html：

<!--把div改下-->
<video-js id="preview" class="vjs-default-skin vjs-big-play-centered" controls preload="auto" width="420" height="280">

</video-js>

video.js：

       if (conUrl.substr(-3) == '3u8') {
            $("#preview").html('<source src="' + conUrl + '" type="application/x-mpegURL">');
                var vid = document.getElementById('preview');
                var player = videojs(vid);
        } else {
            $G("preview").innerHTML = '<video class="previewVideo video-js" controls="controls" src="'+conUrl+'" style="width:420;height:280 "></video>';
        }
QQ截圖20230427144842.png

實(shí)測(cè)也可以實(shí)現(xiàn)預(yù)覽時(shí)播放m3u8視頻：


QQ截圖20230427144544.png

新需求：要增加視頻封面功能

1、在 video.html 頁(yè)面增加封面圖的輸入框：id 自己起名字

<tr>
      <td><label for="coverUrl" class="url"><var id="lang_cover_url"></var></label></td>
      <td><input id="coverUrl" type="text"></td>
</tr>

2、在 zh-cn.js 文件中增加封面的標(biāo)簽文字：全局搜索“視頻網(wǎng)址”就能找到添加的地方了

'lang_cover_url':"封面網(wǎng)址",
QQ截圖20230506101651.png

3、在 video.js 頁(yè)面接收封面參數(shù)值：

/**
     * 將單個(gè)視頻信息插入編輯器中
 */
function insertSingle(){
        var width = $G("videoWidth"),
            height = $G("videoHeight"),
            url=$G('videoUrl').value,
            coverUrl = $G('coverUrl').value,
            align = findFocus("videoFloat","name");
        if(!url) return false;
        if ( !checkNum( [width, height] ) ) return false;
        editor.execCommand('insertvideo', {
            url: convert_url(url),
            width: width.value,
            height: height.value,
            align: align,
            coverUrl: coverUrl
        }, isModifyUploadVideo ? 'upload':null);
}

4、在 ueditor.all.js 中，添加 poster 屬性

搜索：me.commands["insertvideo"]，然后修改如下：

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video', vi.coverUrl));

在修改 creatInsertStr 方法：注意是“video插件， 為UEditor提供視頻插入支持”：

function creatInsertStr(url,width,height,id,align,classname,type,imgUrl){
// 。。。

     case 'video':
                var ext = url.substr(url.lastIndexOf('.') + 1);
                if(ext == 'ogv') ext = 'ogg';
                // str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                //     ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                //     '<source src="' + url + '" type="video/' + ext + '" /></video>';
                // break;
                if (ext == 'm3u8') {
                    str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js vjs-default-skin vjs-big-play-centered" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls=""  width="' + width + '" height="' + height + '" data-setup="{}" poster="'+imgUrl+'">' +
                    '<source src="' + url + '" type="application/x-mpegURL" /></video>';
                } else {
                    str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}" poster="'+imgUrl+'">' +
                    '<source src="' + url + '" type="video/' + ext + '" /></video>';
                }
                break;

// 。。。
}

測(cè)試成功。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容