JS截取腾讯视频和去除视频广告
一:腾讯视频截取
H5视频播放除了video标签以外,还有iframe嵌套视频
项目需求是用户输入腾讯视频的html链接,如
https://v.qq.com/x/page/y0116k2vspw.html
需要把这个html转化为视频,在这里最最关键的一点就是视频videoId的获取,正常情况下videoId就是.html前面字段
用JS把视频ID拿出来
var startIndex=data.info.video.link.lastIndexOf('/') //data.info.video.lonk是后台返回的用户输入的视频链接 var video=data.info.video.link.substr(startIndex+1) var endIndex=video.split('.')[0] //最后得到视频的videoid(endindex=y0116k2vspw)
接下来及就是JS调用腾讯统一播放器(参考地址 https://www.jianshu.com/p/081a4b1cdfc8)
一:Version1.0
1、
首先引入<script language="javascript" src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script>
2、参数配置
<script> var video = new tvp.VideoInfo(); //初始化视频对象 video.setVid(vid); //向视频对象传入视频vid ,这个是点播的时候使用,vid就是视频的videoid //video.setChannelId(cnlid); //向视频对象传入直播频道cnlid ,这个是直播的时候使用 /*点播跟直播的区别主要是: 点播是通过video.setVid(vid); 而直播是通过video.setChannelId(cnlid); 设置直播id 点播需要player.addParam('type','2');或者省略,因为默认播放器为点播状态; 直播必须通过player.addParam('type','1');设置播放器为直播状态,。 */ var player = new tvp.Player(width, height); //初始化播放器对象并设置宽、高,可以直接写具体数字,页可以通过JS动态改变 player.setCurVideo(video); //设置播放器初始化时加载的视频 player.addParam('type','1'); //设置播放器为直播状态,1表示直播,2表示点播,默认为2 player.addParam("wmode","transparent"); //设置透明化,不设置时,视频为最高级,总是处于页面的最上面,此时设置z-index无效 player.addParam('autoplay',false); //是否自动播放 player.addParam('pic',''); //播放器默认图,当autoplay=0时有效;不传入则使用视频截图 player.addParam('showend',0) //结束时是否有广告
player.addParam("adplay","0"); //去除广告 ,默认 1 是显示广告,0是屏蔽广告
player.addParam("player","html5"); //播放器类型为html5,还可以设置为控件播放,flash播放,以及auto 自动选择等
player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf"); //flash播放器精简皮肤;不传入则使用默认皮肤 player.addParam("loadingswf", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/web_small_loading.swf"); //加载视频时的swf动画; 不传入则使用默认样式 player.write(DOMid); //输出播放器,DOMid为播放器的容器 //events player.onplaying = function(vid) { console.log(vid); } player.onended = function(vid) { console.log(vid); } </script>
二:Version2.0
1、
首先引入<script language="javascript" src="http://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js" charset="utf-8"></script>
2、参数配置
<script> var video = new tvp.VideoInfo(); video.setVid(vid); var player =new tvp.Player(); player.create({ width: width, //播放器的宽度 height: height, //播放器的高度 video: video, //默认的视频对象 modId: DOMid, //默认的 DOM 元素 ID autoplay: false, pic: imgURL }); player.onplaying = function (vid){ console.log(vid) } player.onallended = function (vid){ console.log(vid) }; </script>
完美去除腾讯视频广告
分类:
javascript实际项目问题
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构