文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Ueditor 富文本编辑器 插入 m3u8 和 mp4 视频(PHP)

2023-09-12 16:13

关注

当前环境:PHP、Ueditor的版本是1.4.3

新的需求是,需要在Ueditor 富文本编辑器中,插入视频播放,并且视频格式有MP4,也有M3U8。

百度编辑器默认的是embed,需要修改下配置。 ueditor.all.jsueditor.config.js这两个文件要改一些东西,具体我这里就不展示了,网上有很多文章都有写。

注意:

创建插入视频字符串,这里也需要判断m3u8,mp4

case 'video':                var ext = url.substr(url.lastIndexOf('.') + 1);                if(ext == 'ogv') ext = 'ogg';                // str = '                //     ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +                //     '';                // break;                if (ext == 'm3u8') {                    str = '
'
; } else { str = '
'
; } break;

如图:
在这里插入图片描述

这里主要说下 video 文件夹中的修改(ueditor\dialogs\video)。

先说 video.js 文件,一般的方法是修改 function createPreviewVideo(url) 方法,把 $G(“preview”).innerHTML 原有的修改为:

$G("preview").innerHTML = '
'
;

看图:
在这里插入图片描述
回到编辑器中操作插入视频功能,MP4格式的没问题,预览的时候可以播放,插入到编辑器后也可以播放;但是M3U8格式的视频不行,预览和插入后都不能播放。

在 video.html 页面中添加插件videojs:

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

也不行,好像是js没起作用。

视频弹出框 :

在这里插入图片描述
富文本编辑器中:
在这里插入图片描述
在本地静态页面测试的时候发现 m3u8 格式的 video 标签,要有type属性:type=“application/x-mpegURL”,但是 mp4 格式的加上“application/x-mpegURL”,却不能播放了。

所以在 video.js 里面写了一个判断,根据视频格式写不同的 type:

       $G("preview").innerHTML = '
'+lang.urlError+'
'
+if (conUrl.substr(-3) == '3u8') { $G("preview").innerHTML = ''; var vid = document.getElementById('preview'); var player = videojs(vid); } else { $G("preview").innerHTML = '
'
; }

重新插入 m3u8 格式的视频,发现预览和插入后还是不能播放,mp4格式的视频在预览和插入后都可以播放。

抱着试一试的想法,点了提交按钮,发现在预览页面中可以播放,前提是要在预览页(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>

如图:
在这里插入图片描述
同理,在前台页面中引用video.js,也可以播放 m3u8 的视频,只是不能在编辑的时候播放。

但是还有个问题,如果插入多个m3u8的视频,它们的id都是一样的,只有一个视频可以播放

在这里插入图片描述
我想在 ueditor.all.js 文件中发现视频部分在前面修改的时候被注释掉了,打开就可以了:
在这里插入图片描述
效果如图:
在这里插入图片描述
修改下js代码,功能是播放其中一个视频的时候,其他视频都暂停播放:

$('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();                }            });        });    });})

初步实现了需求,只是在视频弹出框预览时,和在ueditor编辑器中不能播放m3u8的视频,但是mp4的视频都可以播放;而在后台预览页,与前台正式页面中,视频的播放都没有问题。

进一步优化

在这里插入图片描述
视频弹出框中底部的按钮,我实在没有找到在哪里定义,或者封装的,就想了一个比较笨的方法,把原始的按钮注释掉,自己重新写2个按钮,实现预览和插入功能。

ueditor.css修改:

.edui-default .edui-dialog-foot {    background-color: white;    display: none; }

video.html修改:

<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="预览" />      <input type="button" id="btn_insert" value="确认" />div><script>    $(function () {        $("#btn_preview").click(function () {            var url = $("#videoUrl").val();            if (url.substr(-3) == '3u8') {                $("#preview").html('+ url + '" type="application/x-mpegURL">');                var vid = document.getElementById('preview');                var player = videojs(vid);            } else {                $G("preview").innerHTML = '
'
; } }); $("#btn_insert").click(function () { var url = $("#videoUrl").val(); if (url.substr(-3) == '3u8') { var guid = generateGUID(); var html = '
'
} else { var html = '
'
} 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修改:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
重新插入m3u8视频:预览效果
在这里插入图片描述
到此,视频弹窗的预览效果实现了,不过还有一个问题,就是视频插入后,在富文本编辑器中还是不能播放m3u8的视频。

有什么好的方案欢迎给我留言。

补充:不用自定义预览和确认按钮,用原始的按钮也可以实现在预览时播放视频(上面优化的部分不用改,只做下面修改)

video.html:

<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('+ conUrl + '" type="application/x-mpegURL">');                var vid = document.getElementById('preview');                var player = videojs(vid);        } else {            $G("preview").innerHTML = '
'
; }

在这里插入图片描述
实测也可以实现预览时播放m3u8视频:
在这里插入图片描述

新需求:要增加视频封面功能

在 video.html 页面增加封面图的输入框:id 自己起名字

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

在 zh-cn.js 文件中增加封面的标签文字:全局搜索“视频网址”就能找到添加的地方了

'lang_cover_url':"封面网址",

在这里插入图片描述
3、在 video.js 页面接收封面参数值:

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

在 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 = '                //     ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +                //     '';                // break;                if (ext == 'm3u8') {                    str = '
'
; } else { str = '
'
; } break;// 。。。}

测试成功。

来源地址:https://blog.csdn.net/joe0235/article/details/130407357

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯