zoukankan      html  css  js  c++  java
  • [教程]视频网课如何打开倍速纵享丝滑

    一些废话

    眼看着这场灾难般的疫情逐渐平息,我们的网课生涯也要告一段落了

    再次回想这两个月来在家休闲恬淡的生活
    Gy31vF.png
    (笑)
    感动完了 是时候面对多(can)彩(dan)的人生了

    你们的网课,上完了吗?

    与其看着几十节丝毫未动的网课陷入绝望,不如……
    GcXdfK.png

    来啊 快活啊 4倍速带你上天

    教程适用范围

    • 录播网课的苦逼孩子们
    • 电脑网页端上网课的苦逼孩子们
    • 网课页面用的是Flash播放器的苦逼孩子们
    • 快要开学还有好多课没上完而且开学之后还要考试的苦逼孩子们
    • 总之适用于苦逼孩子们

    P.s. 亲测对于云课网(某郡卫星远程学校)可用 其他平台未作尝试,仅供参考

    教程开始!

    鉴于市面上大多数浏览器主要以Chrome为内核,包括Chrome、360安全浏览器、搜狗高速浏览器等等等等

    (以及一枝独秀的Firefox)

    我就以Firefox和Chrome为例来讲解

    (点击可查看大图)

    通过修改User-Agent替换Flash播放器

    安装扩展程序User Agent Switcher

    在扩展中心中搜索关键词,我们会发现有很多种类似的扩展程序,任选其一安装即可。

    当然新手或者不是很懂的同学也可以照着我下文图片中的那两款安装(看图标!)

    鉴于各大浏览器的扩展中心各不相同,没有弄懂的同学可以百度XX浏览器如何安装扩展程序

    对于Chrome

    • 打开扩展程序窗口 然后在左侧栏中找到网上商店入口
      Gy3Jb9.png
    • 接着在搜索框搜索User Agent Switcher
      选择你心仪的一款 将其添加至Chrome
      Gy38u4.png

    使用X60安全浏览器、X狗高速浏览器的同学们快速地完成了这一步

    而使用Chrome的同学发现……

    诶诶诶!为什么我的网上商店打不开

    Oh我的老伙计 这可是谷歌啊 你知道的

    既然你已经有了用Chrome的觉悟

    我想 这对你来说应该不是什么问题[手动狗头]

    或者你也可以去百度Chrome如何安装扩展程序

    这里就不赘述啦~

    我才不会说是因为太麻烦我不想说

    对于Firefox

    Firefox就没那么多事儿了
    照着来就行

    (点击可查看大图)

    • 点开右上角的菜单 选择扩展程序
      有一说一 必应的每日壁纸是真的好看逼格又高 墙裂推荐作为主页
      所以 必应打钱(bushi)
      Gy3tER.png
    • 在上方的搜索栏中输入User Agent Switcher
      Gy3NU1.png
    • 点击你心仪的目标,安装
      我这里使用的是第三个
      (毕竟人家都标了个推荐在上面了)
      Gy3GDJ.png

    修改User-Agent

    这时候,我们可以注意到在浏览器右上栏中出现了我们刚安装程序的图标

    不同扩展程序的布局各不相同,这里需要大家好好研究一番,自己安装的版本是如何使用的

    相信你们的英语实力awa

    我们在这一步的目的是将浏览器的user-agent改为与iPad相同

    此时网站会误认为你在使用iPad上课,然后将Flash播放器替换为HTML5播放器

    绝大多数的这类扩展程序都提供了一些选项供你选择

    此时我们选择iPad

    但由于未经测试,无法保证它们全部能够奏效

    (不过我觉得应该是没问题的~)

    当扩展程序提供的选项中没有iPad或者它不管用时

    建议自定义User-Agent

    亲测下面这个User-Agent是有效的

    Mozilla/5.0 (iPad; CPU OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

    将它复制到自定义的地方以完成

    下面是我安装的版本图解 仅供参考

    对于Chrome

    单击刚刚安装的扩展

    选择iOSiPad

    刷新 看到网课界面没有“未安装Flash”的提示就代表成功了

    Gcv3Z9.png

    接下来是自定义的图解,大多数扩展都大同小异

    (上一步成功了的可略过)

    • 打开对应扩展的管理页面
      Gy3w8K.png
      Gy3BvD.png

    • 此时应该可以找到自定义的输入框
      和这个布局不大一样的 用高中英语知识自行探索一下吧
      如图 名字(Name)和分组(Group)还有标识(Indicator Flag)是随意的
      它们各对应的地方可以在图片中看到
      中间的那一栏复制粘贴上文的那个就行
      填写完毕后点Add
      Gy3sDH.png

    • 接下来的操作大同小异 看图就行
      Gy3ybd.png

    Gy3cVA.png

    对于Firefox

    • 我安装的这个扩展 清晰明了 一张图搞定
      GcX8OJ.png

    • 出现这个界面就代表你这一步成功了
      GcXUFx.png

    P.s.QAQ我现在终于知道写教程多难了
    感谢互联网的分享精神

    一些使用技巧

    上面一波操作完毕后
    我们会发现别的网页也发生了一些变化

    因为这时所有的网站都把你当成iPad用户了

    Gy3U4x.png

    由于比例原因

    看起来会很不舒服

    这时只需关掉就行了

    自行探索一下不成问题

    然而最便捷的方法是设置白名单!

    对于Chrome

    还是打开刚刚的管理界面

    左侧选择第二个选项

    如图设置即可

    Gy3dC6.png

    对于Firefox

    还是刚刚的界面,选择左下角的 Options

    GcXJm9.png

    安装脚本使Html5播放器正常启动

    安装Tampermonkey脚本管理器

    相信大家或多或少听说过这玩意儿

    传说中的百度云下载必备

    操作和刚刚安装switcher是一样的

    换个关键词就行了

    对于Chrome

    Gy3lgU.png

    对于Firefox

    Gy3nNq.png

    安装脚本hls.user.js

    这一步 基本所有的浏览器都一样

    点击这里的传送门
    hls.user.js

    照着图来 大家都会

    Gy3MCV.png
    Gy3Q3T.png

    这时再打开你的网课网页

    发现视频可以播放啦!

    Speed up !!!!!

    安装用于控制速度的脚本

    步骤和上面的一模一样

    那么这里我推荐两个脚本

    一个是简单版 一个是超级进阶版

    传送门走起

    视频速度控制器

    HTML5视频播放器增强脚本

    操作说明-视频速度控制器

    这里我就直接贴一下作者留下的说明叭

    看来这个脚本也是为网课而生呀

    (反思一下 人家都会自己编脚本了 你还只会抠jio)

    GcX1lF.png

    操作说明-HTML5视频播放器增强脚本

    这个 脚本 强!到!爆!

    具体操作如下

    GcX3y4.png

    awa真的要感谢网友们的分享精神

    原理小讲堂

    awa不感兴趣的同学可以跳过啦~

    我就简单说一下叭

    这方面水似乎挺深 我这样一个小菜鸡还研究不透

    而且在这0202年 我查到的资料几乎都是3年前起步的

    有错误或者过时内容还请一定一定指出 万分感谢

    User-Agent是什么?

    水题 直接扔百科 下一个 (bushi)

    由于某些原因 苹果的iOS不支持Flash播放器

    所以一般使用Flash播放器的网站 会在iOS端将其替换为HTML5播放器

    所以我们只要假装自己是果粉就行了(笑

    Flash那么可爱 为什么要干掉Flash qwq

    一点也不可爱

    其实吧 Flash视频播放器在大多数网站早已被HTML5标准下的视频播放器替代

    除了像这种教育类型的老网站

    怪就怪云课网的程序员们懒得换

    没有创新意识 差评

    我就简单地分几点来谈一下

    FLash插件难以被破解

    Flash 是插件,而且发展了这么多年,技术已经相当成熟,甚至可以做到在代码中直接插入编译好的 C 模块(FlasCC 技术,原称 Alchemy),很多视频网站(比如优酷和腾讯)的 Flash 播放器中都有破解难度相当大的 C 模块。[1]

    Flash难以被破解的特性,对视频网站来说是好事

    可以防止视频被盗或者被跳广告 (大多数视频网站靠这个恰饭) 等一系列问题

    但对我们来说就不那么好了

    Flash原生并不支持倍速等多种功能 功能单一 播放 暂停 进度条 没了

    朴实无华,且枯燥

    Flash插件安全性低

    乍一看这一条好像和上一条冲突,但这里的安全性是相对用户而言的

    Flash相较于Javascript

    脱离了浏览器的限制,权限更大,也更容易访问到本地文件

    然而权力越大,漏洞就越多

    这意味着黑客有了可乘之机

    稍懂网络安全的人都知道

    Flash有着漏洞之王的称号

    动不动就爆出个严重安全漏洞

    问题是这玩意儿还是闭源的 得等Adobe的工程师来修

    于是当HTML5这一可替代它的技术出现之后

    Flash立马就被抛弃了

    咱看看Google的Chrome怎么说

    GcXBlD.jpg

    其实咱也不能奢求什么

    毕竟人家Adobe是搞艺术套餐的(笑

    Flash效率低下 资源占用较大

    关于内存,flash页游做得好的,大概控制在150m到200m,做得不好的,分分钟跑到500m,1g都有。就内存这一项,就可以让你想用也用不了。此外,flash9的avm2虚拟机+as3类js语言,语言和性能都远远落后于java和c#虚拟机,导致cpu功耗也比较高。[2]

    直观感受就是过于吃内存 内存小的情况下还会感觉卡

    Flash的末路

    Flash相对于较新的HTML5标准来说 已经是老大爷级别

    但俗话说得好 百足之虫,死而不僵

    Flash在互联网时代产生了相当巨大的影响

    一如当年的Windows XP

    虽然官方宣布在2020年底停止支持

    想必还是会有一定的应用

    但我怕的就是这个

    如何看待Chrome将在2020年底不再支持Flash,这将会对国内互联网造成什么样的冲击? - Apisa的回答 - 知乎

    现在的Flash早就已经开始使坏了

    之前我装个Flash 竟然蹦出一堆页游广告

    Flash你变了 再见罢

    (再怀念一波4399和QQ农场什么的)

    为何需安装脚本才能正常解码播放网课视频?

    这个问题有点复杂 我研究了好久的说

    因为我们上网课的网站视频源格式为m3u8,而这种格式无法支持Windows上的HTML5播放器

    引用个我也不是很看得懂的图

    GcXYwR.png

    从图片里可以看出来 只有Safari和Edge是完美支持的

    所以说 使用Windows10的同学

    可以直接开挂跳过安装插件的阶段 直接修改user agent就行

    而这个操作 Edge浏览器可以直接通过按下F12后出现的仿真界面设置

    简单而美好[狗头]

    咳咳我还是硬着头皮试着讲一下。。。

    m3u8 是一种基于 HTTP Live Streaming (HLS) 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持[4]

    原生的 HTML5 <video> 元素在 Windows PC 上仅支持 mp4 (H.264 编码)、webm、ogg 等格式视频的播放。[1]

    从这两段材料中可以看出 我们是无法通过HTML5的视频播放器来播放m3u8格式的网课视频的

    然而……程序员可是万能哒!

    于是MSE就应运而生了

    我们可以把<video>标签看做拥有解封装和解码功能的浏览器自带播放器。随着视频点播、直播等视频业务的发展,视频通过流媒体传输协议(目前常用的有两种,MPEG-DASH和Apple的HLS)从服务器端分发给客户端,媒体内容进一步包含在一层传输协议中,这样<video>就无法识别了。以HLS为例,将源文件内容分散地封装到了一个个TS文件中。
    仅靠<video>标签无法识别这样的TS文件,那么就引入了MSE拓展来帮助浏览器识别并处理TS文件,将其变回原来可识别的媒体容器格式,这样<video>就可以识别并播放原来的文件了。那么支持HTML5的浏览器就相当于内置了一个能够解析流协议的播放器。[5](奇怪的是[6]中也有一模一样的一段 这就雨我无瓜了awa)

    简而言之,MSE技术可以将视频实时转码为浏览器支持播放的格式

    我们上面安装的hls.user.js就是运用了这种技术。

    参考资料

    我毕竟还是菜啊,说也说不清qaq

    这里提供一些我查阅引用过的质量不错的资料,感兴趣的同学们推荐看一看

    [1] 为什么国内大部分视频厂商不对PC开放HTML5? - 张一环的回答 - 知乎

    [2] iOS 不支持 Flash 的真实原因是什么? - 顾雷的回答 - 知乎

    [3] 几张图让你看懂WebAssembly - 简书

    [4] 有支持M3U8格式的HTML5播放器吗? - 蒲小花的回答 - 知乎

    [5] 粗识 HTML5 video 标签和MSE媒体源扩展

    [6] H5直播系列二 MSE(Media Source Extensions) - 简书

    P.s. 上述引用的资料,如有侵权请联系我,我会在第一时间将其删除并致歉。

    快乐补课时间

    emmm如果有不懂的同学可以通过QQ联系我喔

    博客左侧菜单那个应该能用awa

    那么教程到这里就结束了(哈欠)

    不说了补课去(悲

    GcXaY6.jpg

  • 相关阅读:
    redis 基础知识
    vue + django 项目部署
    django 的静态资源
    uwsgi 与 supervisor
    django基础之orm(models)初识
    django基础之模板Template
    django基础知识之视图views
    django基础知识之django介绍及url
    django基础之Web框架介绍
    mysql之pymysql模块相关
  • 原文地址:https://www.cnblogs.com/marshuni/p/12653252.html
Copyright © 2011-2022 走看看