tcplayer 源码改造第三弹 - 防盗录
文章目录
- 前序
- 简介
- 人群
- git地址
- 源码改造tcplayer.js(各位客官请自行格式化代码)
- 修改思路
- 添加配置参数
- 添加防盗录的节点
- 添加防盗录的节点样式
- 使用说明
- 参数说明
- 使用示例
- 相关推荐
前序
简介
- 主要介绍了基于tcplayer的源码改造,加入防盗录(即随机在视频中出现自定义的字符)功能
- 不涉及tcplayer的使用以及框架如何调用,详情请看腾讯云点播文档
- 源码解析中有些注释是笔者加的,如需定位,请不要复制注释
- 以下示例的代码为重新混淆压缩过,可能与原来的tcplayer.js函数名不同,不可直接复制使用,请务必跟着笔者一步步执行
人群
- 不想自己写播放器而使用tcplayer,但是又受限于播放器本身不带有防盗录功能的开发人员
- 不适合没有任何前端基础的小白,请谨慎观看
git地址
https://github.com/HaverLee1/hls-player
源码改造tcplayer.js(各位客官请自行格式化代码)
修改思路
- 浏览器中打开播放器页面,打开开发者工具,定位到视频播放的节点,可以看到视频的根节点是"vcp-player",video标签就是该节点的下一级节点,所以可以考虑在节点"vcp-player"加一个节点,作为video的同层节点来显示防盗录的信息
- 在修改过程中,考虑到防盗录的功能(加大盗录后去水印的难度),增加如下的参数配置
- 自定义字符
- 随机位置
- 随机字体大小
- 随机颜色
添加配置参数
在代码中定位videoSource,在第一个的位置,即初始化赋值的同层如下参数(带有注释的则是笔者加入的参数)
function t(i, o) {n(this, t);var s = l(o);M = ["od", "hd", "sd"];var a = {owner: i,videoSource: s,src: s.curUrl,autoplay: o.autoplay,live: o.live,flash: o.flash,flashUrl: o.flashUrl,poster: o.poster,width: o.width,height: o.height,volume: o.volume,listener: o.listener,wording: o.wording,controls: o.controls,clarity: o.clarity,clarityLabel: o.clarityLabel,showLoading: "boolean" != typeof o.showLoading || o.showLoading,pausePosterEnabled: void 0 === o.pausePosterEnabled || o.pausePosterEnabled,fullscreenEnabled: void 0 === o.fuScrnEnabled || o.fuScrnEnabled,systemFullscreen: o.systemFullscreen || !1,hls: o.hls || "0.12.4",h5_flv: o.h5_flv,x5_player: o.x5_player !== !1,x5_type: o.x5_type,x5_fullscreen: o.x5_fullscreen,x5_orientation: o.x5_orientation,x5_playsinline: o.x5_playsinline,preload: o.preload || "auto",hlsConfig: o.hlsConfig,flvConfig: o.flvConfig,// curRateIndex表示当前倍速的索引curRateIndex: o.curRateIndex ? o.curRateIndex : 4,// rates表示倍速数组rates: o.rates ? o.rates : [2, 1.75, 1.5, 1.25, 1.0, 0.75, 0.5],// 防录屏文字,无则表示不出现防录屏文字appear_text: o.appear_text,// 文字出现是时长最大值appear_time: o.appear_time ? o.appear_time : 10,// 文字消失的时长最大值disappear_time: o.disappear_time ? o.appear_time : 100,// 文字出现时的颜色appear_color: o.appear_color ? o.appear_color : ['#fff', '#000'],// 文字出现时字体的最小值appear_fontsize_min: o.appear_fontsize_min ? o.appear_fontsize_min : 12,// 文字出现时字体的最大值appear_fontsize_max: o.appear_fontsize_max ? o.appear_fontsize_max : 22,};return r(this, e.call(this, a))}
添加防盗录的节点
定位字符串"vcp-player",可以定位到如下代码:
t.Player = function () {function e(t) {r(this, e), this.options = t, this.ready = !1, this.hasPlay = !1;var i = t.owner;return i ? (this.guid = x.guid(), this.listener = this.options.listener, d.sub("*", "*", x.bind(this, this.handleMsg), this), i = P.get(i), this.mtaReport = new L["default"](this, this.options), void this.render(i)) : console.error("Player need a container")}return e.prototype.render = function (e) {var t = "vcp-player";if (C.TOUCH_ENABLED && (t += " touchable"), this.el = P.createEl("div", {"class": t}), e.appendChild(this.el), this.errortips = new T["default"](this), this.errortips.render(this.el), this.loading = new E["default"](this), this.loading.render(this.el), this.options.width = this.options.width || e.offsetWidth, this.options.height = this.options.height || e.offsetHeight, this.size(this.options.width, this.options.height), !this.verifyOptions()) {return this.listener({type: "error", code: 5}), x.console.error("create failed")}
修改如下:
t.Player = function () {function e(t) {r(this, e), this.options = t, this.ready = !1, this.hasPlay = !1;var i = t.owner;return i ? (this.guid = x.guid(), this.listener = this.options.listener, d.sub("*", "*", x.bind(this, this.handleMsg), this), i = P.get(i), this.mtaReport = new L["default"](this, this.options), void this.render(i)) : console.error("Player need a container")}// 生成[min,max]区间的随机数字function f1(min, max) {return Math.floor(Math.random() * (max - min)) + min}return e.prototype.render = function (e) {var t = "vcp-player", o = this.options, spanElment = P.createEl("span", {"class": "oneweek-video-el"});// 如果存在appear_text则进行文字悬浮if (o.appear_text) {spanElment.innerHTML = o.appear_text;spanElment.style.display = "none";const appearColorLength = o.appear_color.length;const appearColor = o.appear_color;const appearFontsizeMin = o.appear_fontsize_min;const appearFontsizeMax = o.appear_fontsize_max;const appearTime = o.appear_time, disappearTime = o.disappear_time;let showStudengNumPositionX, showStudengNumPositionY;// 设置出现随机字符的周期 -> 出现最大时长+消失的最大时长const interTime = (appearTime + disappearTime) * 1000;// 创建定时器setInterval(() => {// 消失的时长,范围是[1,消失的最大时长]const disappearDuration = f1(1, disappearTime) * 1000;setTimeout(() => {// 随机位置的style.leftshowStudengNumPositionX = f1(20, 80);// 随机位置的style.topshowStudengNumPositionY = f1(20, 80);// 出现的时长,范围是[1,出现的最大时长]const appearDuration = f1(1, appearTime) * 1000;// 随机颜色const appearColorIndex = f1(0, appearColorLength);// 随机字体大小const fontSize = f1(appearFontsizeMin, appearFontsizeMax);// 展示防盗录文字spanElment.style.display = "";spanElment.style.color = appearColor[appearColorIndex];spanElment.style.left = showStudengNumPositionX + "%";spanElment.style.top = showStudengNumPositionY + "%";spanElment.style.fontSize = fontSize + 'px';setTimeout(() => {// 不展示防盗录文字spanElment.style.display = "none";}, appearDuration);}, disappearDuration);}, interTime);}if (C.TOUCH_ENABLED && (t += " touchable"), this.el = P.createEl("div", {"class": t}),// 添加防盗录节点spanthis.el.appendChild(spanElment),e.appendChild(this.el), this.errortips = new T["default"](this), this.errortips.render(this.el), this.loading = new E["default"](this), this.loading.render(this.el), this.options.width = this.options.width || e.offsetWidth, this.options.height = this.options.height || e.offsetHeight, this.size(this.options.width, this.options.height), !this.verifyOptions()) {return this.listener({type: "error", code: 5}), x.console.error("create failed")}
此时,使用浏览器打开播放页面和开发者工具,定位到视频播放节点,可以看到在"vcp-player"出现了我们自定义的span节点,但是在播放器中还看不到文字浮现,下面,我们就要来修改该节点的样式
添加防盗录的节点样式
依旧定位字符串"vcp-player",可以找到如下的样式信息
t = e.exports = i(8)(), t.push([e.id, ".vcp-player{position:relative;z-index:0;font-family:Tahoma,\\\\5FAE\\8F6F\\96C5\\9ED1,\\u5b8b\\u4f53,Verdana,Arial,sans-serif;background-color:#000}.vcp-player video{display:block;overflow:hidden}.vcp-fullscreen.vcp-player,.vcp-fullscreen video,body.vcp-full-window{width:100%!important;height:100%!important}body.vcp-full-window{overflow-y:auto}.vcp-full-window .vcp-player{position:fixed;left:0;top:0;z-index:2147483647}.vcp-pre-flash,.vcp-video{width:100%;height:100%}.vcp-pre-flash{z-index:999;background:#000;position:absolute;top:0;left:0}.vcp-controls-panel{position:absolute;bottom:0;width:100%;font-size:16px;height:3em;z-index:1000}.vcp-controls-panel.show{-webkit-animation:fadeIn ease .8s;animation:fadeIn ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.vcp-controls-panel.hide{-webkit-animation:fadeOut ease .8s;animation:fadeOut ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.vcp-panel-bg{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#242424;opacity:.8;filter:alpha(opacity=80);z-index:1000}.vcp-playtoggle{cursor:pointer;position:relative;z-index:1001;width:3em;height:100%;float:left;background-image:url(" + i(9) + ");background-image:url(" + i(10) + ")\\0}.vcp-playtoggle:focus,.vcp-playtoggle:hover{background-color:#708090;opacity:.9;filter:alpha(opacity=90)}.touchable .vcp-playtoggle:hover{background-color:transparent;opacity:1}.vcp-playing .vcp-playtoggle{background-image:url(" + i(11) + ");background-image:url(" + i(12) + ")\\0}.vcp-bigplay{width:100%;height:80%;position:absolute;background-color:white\\0;filter:alpha(opacity=0);opacity:0;z-index:1000;top:0;left:0}.vcp-slider{position:relative;z-index:1001;float:left;background:#c4c4c4;height:10px;opacity:.8;filter:alpha(opacity=80);cursor:pointer}.vcp-slider .vcp-slider-track{width:0;height:100%;margin-top:0;opacity:1;filter:alpha(opacity=100);background-color:#1e90ff}.vcp-slider .vcp-slider-thumb{cursor:pointer;background-color:#fff;position:absolute;top:0;left:0;border-radius:1em!important;height:10px;margin-left:-5px;width:10px}.vcp-slider-vertical{position:relative;width:.5em;height:8em;top:-5.6em;z-index:1001;background-color:#1c1c1c;opacity:.9;filter:alpha(opacity=90);cursor:pointer}.vcp-slider-vertical .vcp-slider-track{background-color:#1275cf;width:.5em;height:100%;opacity:.8;filter:alpha(opacity=80)}.vcp-slider-vertical .vcp-slider-thumb{cursor:pointer;position:absolute;background-color:#f0f8ff;width:.8em;height:.8em;border-radius:.8em!important;margin-top:-.4em;top:0;left:-.15em}.vcp-timeline{top:-10px;left:0;height:10px;position:absolute;z-index:1001;width:100%}.vcp-timeline .vcp-slider-thumb{top:-4px}.vcp-timeline .vcp-slider{margin-top:8px;height:2px;width:100%}.vcp-timeline:hover .vcp-slider{margin-top:0;height:10px}.vcp-timeline:hover .vcp-slider-thumb{display:block;width:16px;height:16px;top:-3px;margin-left:-8px}.vcp-timelabel{display:inline-block;line-height:3em;float:left;color:#fff;padding:0 9px}.vcp-timelabel,.vcp-volume{height:3em;z-index:1001;position:relative}.vcp-volume{width:3em;cursor:pointer;float:right;background-color:transparent;opacity:.9;filter:alpha(opacity=90)}.vcp-volume-icon{background-image:url(" + i(13) + ");background-image:url(" + i(14) + ")\\0;display:inline-block;width:3em;height:3em;position:absolute;left:0;top:0}.vcp-volume-muted .vcp-volume-icon{background-image:url(" + i(15) + ");background-image:url(" + i(16) + ")\\0}.vcp-volume .vcp-slider-vertical{top:-8.4em;left:1em;display:none}.vcp-volume .vcp-slider-track{position:absolute;bottom:0}.vcp-volume:hover .vcp-slider-vertical{display:block}.vcp-volume .vcp-volume-bg{height:8.8em;width:2em;position:absolute;left:.25em;top:-8.8em;background:#242424;display:none}.vcp-volume:hover .vcp-slider-vertical,.vcp-volume:hover .vcp-volume-bg{display:block}.vcp-fullscreen-toggle{position:relative;width:3em;height:3em;float:right;cursor:pointer;z-index:1001;background-image:url(" + i(17) + ");background-image:url(" + i(18) + ")\\0}.vcp-fullscreen .vcp-fullscreen-toggle{background-image:url(" + i(19) + ");background-image:url(" + i(20) + ')\\0}.vcp-loading{box-sizing:border-box;background-clip:padding-box;width:50px;height:50px;display:none;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;text-indent:-9999em}.vcp-loading:before{box-sizing:inherit;content:"";display:block;width:100%;height:100%;border-radius:50%;border:3px solid hsla(0,0%,100%,0);border-left-color:#fff;border-right-color:#fff;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.vcp-poster{position:absolute;left:0;top:0;overflow:hidden;z-index:1000;width:100%;height:100%;display:none}.vcp-poster-pic{position:relative}.vcp-poster-pic.cover,.vcp-poster-pic.default{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.vcp-poster-pic.cover{width:100%}.vcp-poster-pic.stretch{width:100%;height:100%}.vcp-error-tips{position:absolute;z-index:1001;width:100%;height:4.5em;left:0;top:50%;color:#ff4500;margin-top:-5.25em;text-align:center;display:none}.vcp-clarityswitcher{height:3em;width:3em;cursor:pointer;position:relative;z-index:1001;float:right;background-color:transparent;opacity:.9}.vcp-vertical-switcher-container{width:3em;position:absolute;left:0;bottom:2.4em;background:#242424;display:none}.vcp-vertical-switcher-current{display:block;color:#fff;text-align:center;line-height:3em}.vcp-vertical-switcher-item{display:block;color:#fff;text-align:center;line-height:2em}.vcp-vertical-switcher-item.current{color:#888}.vcp-share>a{width:3em;height:3em;cursor:pointer;background-image:url(' + i(21) + ");opacity:.9;display:block}.vcp-share{width:3em;height:3em;position:relative;float:right;z-index:1001}.vcp-vertical-share-container{width:auto;height:auto;position:absolute;background:rgba(36,36,36,.8);padding:.5em;overflow:hidden;display:none}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation:fadeOut ease .8s;animation:fadeOut ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation:fadeIn ease .8s;animation:fadeIn ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}", ""])
在其中加入防盗录节点"oneweek-video-el"的样式,如下:
// 加入节点(class="oneweek-video-el")的样式,设置为绝对定位,并且将层级设置为1000,保证全屏时不被视频遮挡t = e.exports = i(8)(), t.push([e.id, ".vcp-player .oneweek-video-el{position:absolute;z-index:1000;}" +" .vcp-player{position:relative;z-index:0;font-family:Tahoma,\\\\5FAE\\8F6F\\96C5\\9ED1,\\u5b8b\\u4f53,Verdana,Arial,sans-serif;background-color:#000}.vcp-player video{display:block;overflow:hidden;}.vcp-fullscreen.vcp-player,.vcp-fullscreen video,body.vcp-full-window{width:100%!important;height:100%!important}body.vcp-full-window{overflow-y:auto}.vcp-full-window .vcp-player{position:fixed;left:0;top:0;z-index:2147483647}.vcp-pre-flash,.vcp-video{width:100%;height:100%}.vcp-pre-flash{z-index:999;background:#000;position:absolute;top:0;left:0}.vcp-controls-panel{position:absolute;bottom:0;width:100%;font-size:16px;height:3em;z-index:1000}.vcp-controls-panel.show{-webkit-animation:fadeIn ease .8s;animation:fadeIn ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.vcp-controls-panel.hide{-webkit-animation:fadeOut ease .8s;animation:fadeOut ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.vcp-panel-bg{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#242424;opacity:.8;filter:alpha(opacity=80);z-index:1000}.vcp-playtoggle{cursor:pointer;position:relative;z-index:1001;width:3em;height:100%;float:left;background-image:url(" + i(9) + ");background-image:url(" + i(10) + ")\\0}.vcp-playtoggle:focus,.vcp-playtoggle:hover{background-color:#708090;opacity:.9;filter:alpha(opacity=90)}.touchable .vcp-playtoggle:hover{background-color:transparent;opacity:1}.vcp-playing .vcp-playtoggle{background-image:url(" + i(11) + ");background-image:url(" + i(12) + ")\\0}.vcp-bigplay{width:100%;height:80%;position:absolute;background-color:white\\0;filter:alpha(opacity=0);opacity:0;z-index:1000;top:0;left:0}.vcp-slider{position:relative;z-index:1001;float:left;background:#c4c4c4;height:10px;opacity:.8;filter:alpha(opacity=80);cursor:pointer}.vcp-slider .vcp-slider-track{width:0;height:100%;margin-top:0;opacity:1;filter:alpha(opacity=100);background-color:#1e90ff}.vcp-slider .vcp-slider-thumb{cursor:pointer;background-color:#fff;position:absolute;top:0;left:0;border-radius:1em!important;height:10px;margin-left:-5px;width:10px}.vcp-slider-vertical{position:relative;width:.5em;height:8em;top:-5.6em;z-index:1001;background-color:#1c1c1c;opacity:.9;filter:alpha(opacity=90);cursor:pointer}.vcp-slider-vertical .vcp-slider-track{background-color:#1275cf;width:.5em;height:100%;opacity:.8;filter:alpha(opacity=80)}.vcp-slider-vertical .vcp-slider-thumb{cursor:pointer;position:absolute;background-color:#f0f8ff;width:.8em;height:.8em;border-radius:.8em!important;margin-top:-.4em;top:0;left:-.15em}.vcp-timeline{top:-10px;left:0;height:10px;position:absolute;z-index:1001;width:100%}.vcp-timeline .vcp-slider-thumb{top:-4px}.vcp-timeline .vcp-slider{margin-top:8px;height:2px;width:100%}.vcp-timeline:hover .vcp-slider{margin-top:0;height:10px}.vcp-timeline:hover .vcp-slider-thumb{display:block;width:16px;height:16px;top:-3px;margin-left:-8px}.vcp-timelabel{display:inline-block;line-height:3em;float:left;color:#fff;padding:0 9px}.vcp-timelabel,.vcp-volume{height:3em;z-index:1001;position:relative}.vcp-volume{width:3em;cursor:pointer;float:right;background-color:transparent;opacity:.9;filter:alpha(opacity=90)}.vcp-volume-icon{background-image:url(" + i(13) + ");background-image:url(" + i(14) + ")\\0;display:inline-block;width:3em;height:3em;position:absolute;left:0;top:0}.vcp-volume-muted .vcp-volume-icon{background-image:url(" + i(15) + ");background-image:url(" + i(16) + ")\\0}.vcp-volume .vcp-slider-vertical{top:-8.4em;left:1em;display:none}.vcp-volume .vcp-slider-track{position:absolute;bottom:0}.vcp-volume:hover .vcp-slider-vertical{display:block}.vcp-volume .vcp-volume-bg{height:8.8em;width:2em;position:absolute;left:.25em;top:-8.8em;background:#242424;display:none}.vcp-volume:hover .vcp-slider-vertical,.vcp-volume:hover .vcp-volume-bg{display:block}.vcp-fullscreen-toggle{position:relative;width:3em;height:3em;float:right;cursor:pointer;z-index:1001;background-image:url(" + i(17) + ");background-image:url(" + i(18) + ")\\0}.vcp-fullscreen .vcp-fullscreen-toggle{background-image:url(" + i(19) + ");background-image:url(" + i(20) + ')\\0}.vcp-loading{box-sizing:border-box;background-clip:padding-box;width:50px;height:50px;display:none;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;text-indent:-9999em}.vcp-loading:before{box-sizing:inherit;content:"";display:block;width:100%;height:100%;border-radius:50%;border:3px solid hsla(0,0%,100%,0);border-left-color:#fff;border-right-color:#fff;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.vcp-poster{position:absolute;left:0;top:0;overflow:hidden;z-index:1000;width:100%;height:100%;display:none}.vcp-poster-pic{position:relative}.vcp-poster-pic.cover,.vcp-poster-pic.default{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.vcp-poster-pic.cover{width:100%}.vcp-poster-pic.stretch{width:100%;height:100%}.vcp-error-tips{position:absolute;z-index:1001;width:100%;height:4.5em;left:0;top:50%;color:#ff4500;margin-top:-5.25em;text-align:center;display:none}.vcp-clarityswitcher{height:3em;width:3em;cursor:pointer;position:relative;z-index:1001;float:right;background-color:transparent;opacity:.9}.vcp-vertical-switcher-container{width:3em;position:absolute;left:0;bottom:2.4em;background:#242424;display:none}.vcp-vertical-switcher-current{display:block;color:#fff;text-align:center;line-height:3em}.vcp-vertical-switcher-item{display:block;color:#fff;text-align:center;line-height:2em}.vcp-vertical-switcher-item.current{color:#888}.vcp-share>a{width:3em;height:3em;cursor:pointer;background-image:url(' + i(21) + ");opacity:.9;display:block}.vcp-share{width:3em;height:3em;position:relative;float:right;z-index:1001}.vcp-vertical-share-container{width:auto;height:auto;position:absolute;background:rgba(36,36,36,.8);padding:.5em;overflow:hidden;display:none}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation:fadeOut ease .8s;animation:fadeOut ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation:fadeIn ease .8s;animation:fadeIn ease .8s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}", ""])
使用说明
使用时请先压缩js文件
参数说明
在原有播放器支持的参数下添加了参数,如下:
参数 | 类型 | 默认值 | 参数说明 |
---|---|---|---|
appear_text | String | 无 | 防录屏文字,无则表示不出现防录屏文字 |
appear_time | Number | 10 | 防录屏文字出现是时长最大值 |
disappear_time | Number | 100 | 防录屏文字消失的时长最大值 |
appear_color | Array | [’#fff’, ‘#000’] | 防录屏文字出现时的颜色 |
appear_fontsize_min | Number | 12 | 防录屏文字出现时字体的最小值 |
appear_fontsize_max | Number | 22 | 防录屏文字出现时字体的最大值 |
使用示例
var player = new TcPlayer('id_test_video', {"m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8","autoplay" : true,"poster" : "http://www.test.com/myimage.jpg","width" : '480',"height" : '320',"x5_player": true,"systemFullscreen": true,"x5_type": "h5","x5_fullscreen": true,"x5_orientation": 2,"appear_text": "","appear_time": 10,"disappear_time": 100,"appear_color": ['#fff', '#F4F4F4'],"appear_fontsize_min": 12,"appear_fontsize_max": 22,
});
相关推荐
- tcplayer源码改造第一弹 -> 自定义hls加密播放器
- tcplayer源码改造第二弹 -> 加入倍速播放
- tcplayer源码改造第三弹 -> 防盗录
- tcplayer 源码改造第四弹 -> 字幕(srt)
- tcplayer源码改造第五弹 -> 兼容sarafi/遨游
tcplayer 源码改造第三弹 - 防盗录相关推荐
- tcplayer 源码改造第二弹 - 加入倍速播放
文章目录 前序 简介 人群 git地址 源码改造(各位客官请自行格式化代码) 实现倍速切换的函数 添加配置参数 添加获取当前倍速的方法 添加切换倍速的函数 参照切换清晰度的代码对控制栏加入倍速播放的节 ...
- 源码系列第1弹 | 带你快速攻略Kafka源码之旅入门篇
大家过年好,我是 华仔, 又跟大家见面了. 从今天开始我将为大家奉上 Kafka 源码剖析系列文章,正式开启 「Kafka的源码之旅」,跟我一起来掌握 Kafka 源码核心架构设计思想吧. 今天这篇我 ...
- Apollo+ES源码改造,构建民生银行的ELK日志平台配置管理中心【转载】
Apollo+ES源码改造,构建民生银行的ELK日志平台配置管理中心 原创 高效开发运维 架构头条 2019-02-28 作者 | 中国民生银行大数据基础平台运维组团队 编辑 | 张婵 随着 IT 业 ...
- Apollo+ES源码改造,构建民生银行的ELK日志平台配置管理中心
作者 | 中国民生银行大数据基础平台运维组团队 编辑 | 张婵 随着 IT 业务系统的迅速发展,中国民生银行需要考虑实现一套完整并适用于民生银行的日志文件智能分析与处理的解决方案.本文详细介绍了中国民 ...
- hadoop作业初始化过程详解(源码分析第三篇)
(一)概述 我们在上一篇blog已经详细的分析了一个作业从用户输入提交命令到到达JobTracker之前的各个过程.在作业到达JobTracker之后初始化之前,JobTracker会通过submit ...
- faster rcnn源码解读(三)train_faster_rcnn_alt_opt.py
转载自:faster rcnn源码解读(三)train_faster_rcnn_alt_opt.py - 野孩子的专栏 - 博客频道 - CSDN.NET http://blog.csdn.net/u ...
- Flume 1.7 源码分析(三)程序入口
Flume 1.7 源码分析(一)源码编译 Flume 1.7 源码分析(二)整体架构 Flume 1.7 源码分析(三)程序入口 Flume 1.7 源码分析(四)从Source写数据到Channe ...
- libevent源码深度剖析三
libevent源码深度剖析三 --libevent基本使用场景和事件流程 张亮 1 前言 学习源代码该从哪里入手?我觉得从程序的基本使用场景和代码的整体处理流程入手是个不错的方法,至少从个人的经验上 ...
- Alibaba Druid 源码阅读(三) 数据库连接池初始化探索
Alibaba Druid 源码阅读(三) 数据库连接池初始化探索 简介 上文中探索了Alibaba Druid的连接池初始化和获取连接的关键代码,接下来详细看看初始化部分 数据库连接池初始化 对整个 ...
最新文章
- 计算机基础名词概念(一)
- Leetcode113路径总和2
- python的learn_python_learn1
- 史上最经典的数据库面试题之二
- Android和.NET通用的AES算法 (转) 好东东 收藏一下
- express 对数据库数据增删改查
- IDEA: .java文件和.class不一致
- 团队项目讨论及计划修订版
- 一秒带你穿越!AI 修复百年前北京影像,路边摊、剃头匠太真实了
- sop8封装尺寸图_详解MOS管封装
- iOS开发-iOS学习完整路线
- cad卸载_CAD绘图效率太低?1GCAD逆天插件送给你,用了再也不卸载
- 中国卫生健康统计年鉴(2006-2021年)
- 身份证号码中间显示*星号
- 重磅!Windows XP源代码泄露
- 漏洞复现:使用Kali制作木马程序
- 东大22春领导科学与决策X《领导科学与决策》在线平时作业2题目非答案
- ftp服务器文件保存位置,ftp服务器和文件保存路径
- 6.使用Numpy创建纯色图片
- 服务器 系统做镜像,服务器系统做镜像