videoJS页面定位,点击播放后会到页面最左上角

成品demo :v.cqutbbs.cn
描述:.net+MVC+SQLSERVER+LayUI+Ueditor,利用ueditor把视频上传到网站,后台开设一个static的静态类作为保存待转换视频的存储列表。FFmpeg4作为切割视频的工具,开线程依次从列表中的视频地址,把视频切片为.ts格式,并且最终生成.M3U8格式的播放列表,待前台的videoJS插件调用。
源代码:https://gitee.com/squall001/VideoOnline
参考:https://download.csdn.net/download/charrys/9901964

遇到的问题总结:
1:videoJS插件CSS定位:
     调用videoJS插件时,外围不要包含Div,仅仅使用video标签即可,因为JS会重写该video标签,自动外围添加一个position:relative的标签,然后内层用position:absolute绝对定位到top:0;left:0的位置,如果外层出现一个div,则vedio标签则会跳出该dom的限制,在body的top:0;left:0位置,播放后引起画面跳走。
2:视频资源全部盗链自其它影视网站,这里参考www.aiaike.com,该网站在前端开启反调试,我破解它的办法如下:
   1):chrome浏览器引用ReRes插件,替换掉https://js.70url.com/dplayer/point.js 里面的debugger和http://js.maziyou.com/key.js的所有内容,通过浏览器“网络”查看xhr链接,拿到.m3u8文件
   2):  因为目的是拿到人家的.m3u8文件,用于给自己的videoJS播放,而原网站采用2级的iframe跨域,但是分析发现 人家的HTTP返回头是“Access-Control-Allow-Origin: *”,所以对方本身没有跨域阻止,但是若使用Chrome浏览器会在http的request.Headers加上“sec-fetch-mode: cors”等头部,所以这里我用插件“modify Headers”去掉该头部与“Origin”头部的value值(因为我无法去掉该头部标签),则可使得.m3u8文件正常播放。这里如使用非chrome或者手机浏览器没有问题。

后记:
   看到大部分资源来做CDN,其中alicdn最稳定,也有盗链到Iqiyi的视频,但是爱奇艺有加密,需要整个Iframe它整个页面,这个网站只是我做的一个玩具

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值