【计算机学习】-- 网页视频加速

系列文章目录

文章目录

系列文章目录
前言
一、开发者选项
二、定义和用法
- 1.基础语法：
- 2.什么是uncaught TypeError:Cannot read properties of null?
二、开发者工具面板：
- 1.Elements面板：
- 2.Console面板：
总结

前言

一、开发者选项

网页视频无法拖动进度条，如何进行加速播放操作以及网页失焦后如何继续播放

1、首先点击键盘F12，进入开发者模式
2、发现标志，heml5，属于原生支持最方便实现加速的
3、属性：

Video对象
Document.getElementById(“myvideo”).playbackRate = 0.5;

二、定义和用法

PlaybackRate属性设置或返回视频的当前播放速度

1.基础语法：

代码如下（示例）：

Document.getElementById(“myVideo”).playbackRate = 0.5;
//或者找到video元素
Document.querySelector(‘video’).defaultPlaybackRate = 1.0通过Console调试窗口，调节播放倍数
Document.querySelector(‘video’).defaultPlaybackRate = 1.0;
Document.querySelector(‘video’).play();
Document.qureySelector(‘video’).playbackRate = 10.0;Document.getElementsByTagName(‘video’)[0].playbackRate = 4
Videojs.getPlayers(“video-player”).html5player.tech_.setPlaybackRate(2)

有个注意事项是进行元素搜索时需要注意切换iframe，否则可能会遇到赋值为null的情况；
Uncaught TypeError:Cannot set properties of null (setting ‘defaultPlaybackRate’) at :2:53

2.什么是uncaught TypeError:Cannot read properties of null?

在JavaScript中，当你试图访问一个null或undefined对象的属性时，就会抛出这个错误。例如，我们有一个变量x，它的值为null，然后当我们尝试访问x.property，就会得到uncaught TypeError:Cannot read properties of null的错误。

为什么会出现这个错误？
1、我们正在尝试访问一个未定义的变量的属性；
2、我们正在尝试访问一个空对象的属性；
3、我们正在尝试访问一个不存在的对象的属性；

如何解决这个问题？
1、检查我们的变量是否已经定义
2、检查我们的变量是否为null或undefined
3、使用可选链式调用

因为元素定位时找不到video这个元素，因此无法进行属性赋值。解决方案就是先切换到video所在的iframe所在界面，
1、可以通过开发者工具里元素定位工具，直接选中video所在的iframe
2、切换console控制台上的标签页，切换后再执行刚才的那块代码即可

二、开发者工具面板：

Elements:查找网页源代码HTML中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈；
Console:记录开发者开发过程中的日志信息，且可以作为js进行交互的命令行Shell;
Sources:断点调试js
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间和性能；
Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles，比如记录js，cpu执行时间细节，显示js对象和相关的DOM节点的内存消耗，记录内存的分配细节；
Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等；
Security:判断当前网页是否安全；
Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等；

1.Elements面板：

实时编辑DOM节点和CSS样式
1、双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面；
2、点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的；在每个属性后面单击可以添加新的样式；
3、点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的；点击不同的位置（top、bottom、left、right）就可以修改元素的paddign、border、margin属性值；
4、查看网页的本地修改历史；
5、点击Styles面板中修改过属性的文件名，会跳转到Source面板；
6、在文件位置右击选择Local modifications，可以查看本地的所有修改记录；
7、点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容；

2.Console面板：

控制台输出日志
通过js代码或命令行console.log()、console.warn()和conlole.error()可以将日志信息输出到控制台；
1、 console.log显示一半的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组；
2、 console.warn显示带有黄色小图标的警告信息；
3、 console.error显示带有红色小图标的红色错误信息；
4、 console.assert当第一个参数为false时，才会显示第一个参数的值；
5、可以根据js条件判断输出不同的日志信息；
注：当需要换到下一行而不是回车的时候，shift+enter