flash h5(自写H5播放器代替超星学术的Flash播放器)

超星学术目前仅有Flash播放器,没H5播放器,这次的情况比上次的超星网课要糟糕点.

flash h5(自写H5播放器代替超星学术的Flash播放器)(1)

装flash那是绝对不可能的,没有H5播放器,咱自己写一个不就完事了吗?

咱先新建一个H5播放器元素,就用原生的video标签就够了

const H5Video = document.createElement('video');

那么我们怎么获取播放地址呢?

flash h5(自写H5播放器代替超星学术的Flash播放器)(2)

包含播放地址的函数被套住了...不能直接解析这个json获取地址

好在右下角有个按钮

flash h5(自写H5播放器代替超星学术的Flash播放器)(3)

点击试试

得到一个下载地址

flash h5(自写H5播放器代替超星学术的Flash播放器)(4)

右键检查元素

flash h5(自写H5播放器代替超星学术的Flash播放器)(5)

那么设置播放地址就很好写出来了

H5Video.src=document.getElementById("downVideo").href;

参照原有div信息,照搬class和id,就不用重新设置css布局了

flash h5(自写H5播放器代替超星学术的Flash播放器)(6)

H5Video.className="Video-main fl";

H5Video.id="playerContent";

加上预加载,另外懒得写播放控制了所以直接开启浏览器自带的播放器控制

H5Video.preload=true;

H5Video.controls=true;

接下来就是把原来的flash给去掉,再把新写出来的播放器塞进去

document.getElementsByClassName("Wid1200 Playvideo1200")[0].removeChild(document.getElementById("playerContent"));

document.getElementsByClassName("Wid1200 Playvideo1200")[0].appendChild(H5Video);

最终得到代码

const H5Video = document.createElement('video'); H5Video.src=document.getElementById("downVideo").href; H5Video.className="Video-main fl"; H5Video.id="playerContent"; H5Video.preload=true; H5Video.controls=true; document.getElementsByClassName("Wid1200 Playvideo1200")[0].removeChild(document.getElementById("playerContent")); document.getElementsByClassName("Wid1200 Playvideo1200")[0].appendChild(H5Video);

因为视频地址加载并不在网页头部,所以做成油猴脚本之前要加一句

//@run-at document-end

看下效果

flash h5(自写H5播放器代替超星学术的Flash播放器)(7)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页