Drupal8.7.6:使用CKEditorVideo模块实现视频上传播放功能

  视频列表、视频网站是用drupal8.7.6开发网站时必然会遇到的需求。这类功能一般解决了视频上传、视频播放、视频格式、视频大小、缩略图等问题,就可以实现上传视频如上传文章一样的效果。
 
  下面,白龙网使用CKEditorVideo、FakeObjects两个模块、一个插件fakeobjects_4.14.1来实现这个功能。
 
  一、下载三2个模块和1个插件
 
  1.CKEditorVideo
 
  https://ftp.drupal.org/files/projects/ckeditor_video-8.x-1.0-beta1.tar.gz
 
  2.FakeObjects
 
  https://ftp.drupal.org/files/projects/fakeobjects-8.x-1.0.tar.gz
 
  3.fakeobjects_4.14.1
 
  https://ckeditor.com/cke4/addon/fakeobjects
 
  二、安装启用模块并配置插件
 
  1.安装CKEditorVideo模块
 
  依次点击“管理->扩展->安装新模块”,选择“InstallfromaURL”或者“Uploadamoduleorthemearchivetoinstall”任意一种方式安装CKEditorVideo模块。
 
  CKEditorVideo模块安装成功后,当启用该模块时,发现启用按钮呈灰色状态,即:无法启用。点开模块下拉按钮发现CKEditorVideo模块依赖的FakeObjects模块没有安装。
 
  2.安装FakeObjects模块
 
  依次点击“管理->扩展->安装新模块”,选择“InstallfromaURL”或者“Uploadamoduleorthemearchivetoinstall”任意一种方式安装FakeObjects模块。
 
  FakeObjects模块安装成功后,当启用该模块时,发现启用按钮呈灰色状态,即:无法启用。点开模块下拉按钮发现FakeObjects模块依赖的CKEditorVideo模块没有安装。
 
  由此可见,CKEditorVideo、FakeObjects两个模块是相互依赖的。因此,要同时勾选两个模块来启用。然而,使用这个方法启用2个模块时,又弹出了“Before you can use the FakeObjects module, you need to download the plugin from ckeditor.com and place it in /libraries/fakeobjects. Check the README.txt for more information. Get the plugin here. (Currently using FakeObjects version Plugin not detected))”错误提示:大概意思是FakeObjects模块缺少相应的插件(fakeobjects_4.14.1)支持。点击提示中的链接,到目标网站下载fakeobjects_4.14.1插件,根据说明提示,进入第3步完成相应配置。
 
  3.配置fakeobjects_4.14.1插件
 
  下载并解压fakeobjects_4.14.1插件压缩包后,找到fakeobjects文件夹,复制fakeobjects文件夹到/libraries/目录下。
 
  至此,CKEditorVideo、FakeObjects模块依赖的插件fakeobjects_4.14.1配置完毕。
 
  4.启用CKEditorVideo、FakeObjects模块
 
  在“管理->扩展”中找到并勾选CKEditorVideo、FakeObjects模块,点击“Install”按钮,稍等片刻,两个模块安装成功。
 
  三、配置功能模块并添加字段
 
  1.把视频按钮添加到编辑器
 
  安装CKEditorVideo、FakeObjects模块并配置好fakeobjects_4.14.1插件后,在“管理->配置->文本编辑器->FullHTML->CKEditor编辑器”的“TOOLBARCONFIGURATION->Availablebuttons”菜单中就会出现一个“视频按钮”的图标,通过这个“视频按钮”可以上传本地或者远程视频。
 
  注意:在“管理->配置->文本编辑器”中把CKEditor设置成“FullHTML”,确保“管理->内容”中使用的CKEditor编辑器处于全局模式。
 
  由于要实现“上传视频如上传文章”一样的效果,所以需要把“视频按钮”添加到CKEditor编辑器的“TOOLBARCONFIGURATION->Activetoolbar”菜单中。
 
  添加方法很简单,只需要把“视频按钮”从“TOOLBARCONFIGURATION->Availablebuttons”菜单中拖拽到“TOOLBARCONFIGURATION->Activetoolbar”菜单上,然后保存配置即可。
 
  经过上述配置,在“管理->内容->添加内容-”的“内容类型”菜单中就会出现一个“视频按钮”的图标,通过这个功能可以上传本地、远程视频。
 
  2.给内容类型添加“文件”字段
 
  如果要在内容类型“视频输出”中上传视频,则点击“管理->结构->内容类型->视频输出->管理字段”中添加一个“file”类型的字段:视频地址(field_video_url),用以上传本地的视频/文件,其它参数根据实际需求设置。
 
  3.解除上传视频的大小问题
 
  在drupal8.7.6中,默认情况下,上传视频/文件大小最大值是2MB,所以,超过2M的文件是无法上传成功的。影响上传文件/视频大小的因素有3个:模块配置、字段参数、php设置。
 
  结合本案例,要上传200M以内的文件/视频,需要在CKEditorVideo模块、视频输出字段、php参数等三个渠道设置相应的参数为200M:
 
  (1)配置CKEditorVideo模块
 
  在“管理->配置->文本编辑器->FullHTML->CKEditor编辑器”的“CKEditorpluginsettings”中,把“Maximumfilesize”的值设置成200MB(文件大小可任意设置)。
 
  (2)配置视频输出字段
 
  在“管理->结构->内容类型->视频输出->管理字段->视频地址(field_video_url)”中,把“Maximumuploadsize”的值设置成200MB(文件大小可任意设置)。
 
  (3)配置php参数
 
  打开php.ini(WampServer与Xampp等不同的环境中php.ini的位置不同,可通过点击图标中的快捷方式快速查到),找到并分别设置post_max_size=200M(文件大小可任意设置)、upload_max_filesize=200M(文件大小可任意设置)。
 
  经过上述配置,在“管理->内容->添加内容-”的“视频输出”内容类型中就可以上传200M以内的视频/文件了。
 
  4.配置视频格式
 
  在“管理->结构->内容类型->视频输出->管理字段->视频地址(field_video_url)->Allowedfileextensions”中,添加“wmv,asf,asx,rm,rmvb,mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob”等视频/文件格式。
 
  需要注意的是,两个格式之间要用英文状态下的“,”或者“一个空格”隔开。
 
  5.配置视频存放目录
 
  (1)默认目录
 
  在“管理->结构->内容类型->视频输出->管理字段->视频地址(field_video_url)->Filedirectory”中,文件上传后,默认是保存在以“年-月”形式([date:custom:Y]-[date:custom:m])命名的目录中。
 
  例如:2021年8月份,通过drupal8.7.6后台上传了若干名为f.mp4、g.mp4的视频文件,则f.mp4、g.mp4等视频文件就保存在“2021-08”目录下面等,而对应的地址就是:/sites/default/files/2018-08/f.mp4、/sites/default/files/2018-08/g.mp4
 
  (2)自定义目录
 
  如果不想以日期的形式命名目录保存上传文件的话,则可以在“管理->结构->内容类型->视频输出->管理字段->视频地址(field_video_url)->Filedirectory”中直接填写目录的名子,即可生成对应的目录,但是目录的前面与后面不能加反斜线。
 
  例如,把视频文件f.mp4上传到/video/目录下,则只需要在“Filedirectory”中填写video即可生成“/sites/default/files/video/f.mp4”地址;把视频文件f.mp4上传到/video/a/目录下,则只需要在“Filedirectory”中填写video/a即可生成“/sites/default/files/video/a/f.mp4”地址。
 
  此外,也可以把默认的日期格式[date:custom:Y]-[date:custom:m]进行扩展成[date:custom:Y]-[date:custom:m]-[date:custom:m]格式,即把“年-月”命名方式扩展成“年-月-日”的命名方式。
 
  四、上传视频的两种方式
 
  到这里,通过“视频地址”字段与CKEditorVideo模块的配合使用,我们不但在drupal8.7.6后台实现了上传视频如上传文章一样的效果,而且还额外的扩展了上传视频/文件的方法:本地上传、远程上传。
 
  1.本地上传
 
  (1)在“管理->内容->添加内容”中点击内容类型“视频输出”;
 
  (2)在弹出的界面中,通过“视频地址”字段上传视频,然后在上传成功的视频上点击鼠标右键,复制视频地址;
 
  (3)点击CKEditor编辑器菜单中视频按钮,在弹出的界面中把上一步复制的视频地址粘贴到“URL”中;
 
  (4)还可以通过“Mutedloopingautoplay”功能控制视频是否自动播放,即,勾选“Mutedloopingautoplay”复选框,视频在相应页面自动播放;反之,不勾选“Mutedloopingautoplay”复选框,则视频在相应页面需要手动点击后才可以播放。
drupal后台上传视频
 
  2.远程上传
 
  远程上传视频/文件与本地上传视频/文件类似,唯一不同的是,远程上传是直接把别人已经上传成功的视频地址复制过来,然后粘贴到视频按钮的“URL”中,省去了自己上传的环节。Drupal8.7.6的这个设计是比较人性化的,别人上传过的视频拿过来可以直接用;自己原创的视频通过后台可以直接上传。
 
  总结下来,drupal8.7.6后台上传视频,其实也就是上传文件/视频;然后获取视频地址、配置视频格式、设置上传视频大小等参数,最后借助模块CKEditorVideo来播放视频。