videojs插件模块经验分享

VIDEOJS是一个我个人比较喜欢的视频播放插件,功能比较强大,而且还有很多插件,可以自己制作喜欢的视屏播放功能。而且还可以自己来开发插件,不过我研究了许久,对VIDEOJS的插件开发还只是刚刚入门。

接下来我做的是一个当视频播放结束之后能够自动显示自定义信息窗口的功能小插件。

下载地址在下面。下载之后,会得到一个css文件和一个js文件,然后在自己的VIDEOJS视频页面中引入这两个文件

<link rel="stylesheet" href="videojs.EndShow.css">
<script src="videojs.EndShow.js"></script>

之后就可以开始使用了。按照官方的代码规范即可

var video = videojs('my-video');
  video.EndShow({
    header: '这里是窗口的标题',
//下面是两个卡片式图文展示的列子
    suggestions: [
      {
        title: '标题1',
        url: '可跳转的URL',
        image: '封面图片', 
        alt: '信息描述', 
        target: '_blank' // 在新窗口总打开
      },
      {
        title: '标题2,
        url: 'http://www.eparty360.com',
        image: 'https://www.eparty360.com/uploads/20190712/44a175f551189b8f733e6aa0caf4324f.jpg',
        target: '_self' // 在本窗口中打开
      }
    ]
  });

下面来看一下效果图

这样视频播放结束之后就会自动弹出这样的图片展示界面,这样的话,可以结合播放列表插件来做播放列表展示,还可以展示广告或其他新闻信息。


发表评论