h5 先加载小图_自写H5播放器代替超星学术的Flash播放器

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

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

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

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

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

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

好在右下角有个按钮

点击试试

得到一个下载地址

右键检查元素

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

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

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

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

看下效果