vue视频播放插件,手机去广告插件

知道video.js的基本使用方法，video.js经过这几年的发展产生了巨大的生态系统，插件的数量已经很多，对制作车轮没有什么意义。 这篇文章介绍了videojs-preroll插件的使用方法。

3358 www.Sina.com/video js-contri B- ads型插件。 用于在videojs上播放前的补丁广告。

在播放广告之前，下载两个插件： videojs-contrib-ads和@silaas/videojs-preroll

下载步骤：

1 .在项目中创建文件夹，然后在文件夹中使用cmd命令。

使用npm ivideojs-contrib-ads命令下载第一个插件。

使用npm i@silaas/videojs-preroll命令下载第二个插件。

4 .等待下载完成，在新文件夹中找到对应的css和j样式，导入到项目中。

下图是为了参考而编写的代码，具体风格需要根据项目的需要进行改变。

这里是源代码

！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' cOntent=' ie=edge ' --video.js基本样式文件--- link href=' CSS/fantasy.CSS ' rel=' style sheet ' /！ - -官方主题--link href=' CSS/video js.ads.CSS ' rel=' style sheet ' /！ -有关广告的CSS-- link href=' CSS/video js-preroll.CSS ' rel=' style sheet ' /！ -广告的CSS---headbodyvideoid=' my-video ' class=' video-jsvjs-theme-fantasyvjs-big-play-centered ' pred ' 播放拉式手机时不自动全屏显示--sourcesrc='素材/60 e2b 36 d 96172.MP4 ' type=' video-- video.js文件--script src='。 -有关广告的js---script src=' js/video js-preroll.js '/script！ -广告的相关js---- scriptvarvideo=video js (我的视频)，{controls:true， //控件(必填)否则无法播放/210031B4D1305素材//视频未播放时的封面playback rates 3360 [ 0.5，1，1.5，2 ]、 //倍速} ) video.preroll((/类型： String|Object|Array广告地址href : '，用于设置广告相关属性src: (素材/about.mp4 ) //广告重定向目标target:'_blank '，//类型： String单击默认值： allowSkip:false，//类型： Boolean默认值： true表示skipTime: '，//类型： Integer默认值：是否可以在5秒后跳过此视频？ repeatAd:true，//类型：布尔默认值： false如果将新的src加载到播放器中，是否应该重复广告。 adSign:true，//类型：布尔默认值：假将“广告”标记添加到视频中。 showRemaining:true，//类型：布尔默认值：显示假广告的剩馀时间(仅当allowSkip设置为假时)。 (adsOptions:{} ()、//类型： Object默认值) (用于设置videojs-contrib-ads插件的lang: )//跳过按钮，“广告”标记跳过skip': '、' skipin': '、' advertisement': '广告'、'视频开始' 3360 ' }； /script/body/html的最终效果如下：

参考文献： https://github.com/dirk janm/video js-preroll/blob/master/readme.MD