您现在的位置是:首页 > 正文

html5视频播放原理,HTML5 - 使用JavaScript控制<video>视频播放(自定义视频播放器)...

2024-04-01 00:44:27阅读 0

下面不使用的controls属性,通过创建一个自定义播放器演示如何使用js操作元素。

效果图如下:

923c157cb1a1d0bd63551b4c2386b894.png

实现功能如下:

(1)可以播放,暂停,停止视频。

(2)可以改变播放速度(2倍速度加速播放,一半的速度慢速播放,正常速度播放)

(3)播放时有进度条,同时还能显示已播放时间。

代码如下:

hangge.com

#durationBar{

border:solid 1px #164900;

width:100%;

margin-bottom:5px;

}

#positionBar{

height:20px;

color:white;

font-weight:bold;

background:#2D9900;

text-align:center;

}

//播放

function play(){

var video = document.getElementById("videoPlayer");

video.play();

}

//暂停

function pause(){

var video = document.ge

网站文章

  • SpringBoot 2.0 配置拦截器

    拦截器常见应用场景日志记录:记录请求信息的日志,以便进行信息监控、信息统计、计算PV(Page View)等。权限检查:如登录检测,进入处理器检测检测是否登录,如果没有直接返回到登录页面;性能监控:有...

    2024-04-01 00:44:21
  • JavaScript 执行环境、作用域、内存管理及垃圾回收机制

    JavaScript 执行环境、作用域、内存管理及垃圾回收机制

    前言JavaScript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。[原理]找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间),周期性地执行这一操作。在学习垃圾回收机制之前让我们先来学习下执行环境及作用域执行环境执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为...

    2024-04-01 00:43:48
  • Vue3 v-model 变更

    Vue3 v-model 变更

    2024-04-01 00:43:41
  • 一文读懂SAFe、DevOps、ITIL和CMMI:互斥还是互补?

    一文读懂SAFe、DevOps、ITIL和CMMI:互斥还是互补?

    本文转自微信号EAWorld。扫描下方二维码,关注成功后,回复“普元方法+”,将会获得热门课堂免费学习机会!本文转自微信号EAWorld。若您试图使企业以更加精简、高效的方式运作,您可利用几种框架来达...

    2024-04-01 00:43:35
  • [X] Android Studio (not installed)

    [X] Android Studio (not installed)你安装了AS,只是路径是自定义的,所以给Flutter指定你的路径吧flutter config --android-studio-dir="D:\Android Studio"路径有空格所以路径加引号,没有空格可不加

    2024-04-01 00:43:10
  • Ajax实现

    Ajax实现

    Ajax实现1、创建服务器获取服务器端的响应onload事件onreadystatechange事件2、配置Ajax对象3、发送请求1、创建服务器在server目录中下载Express框架,并新建ap...

    2024-04-01 00:43:01
  • Java --- JUC之多线程

    1、恢复挂起的线程到真正锁的获取还是有时间差的,从开发人员来看这个时间微乎其微,但从CPU的角度来看,这个时间差存在的还是很明显的。2、使用多线程很重要的考量点是线程切换的开销,当采用非公平锁时,当一...

    2024-04-01 00:42:55
  • 完美避坑!记一次Elasticsearch集群迁移架构实战

    完美避坑!记一次Elasticsearch集群迁移架构实战

    当有新的带有数据角色节点加入集群或者离开集群,集群会默认启动自动平衡机制,索引分片会在数据节点之间平衡漂移,达到平均分布之后停止,频繁的集群节点加入或者下线会严重影响集群的IO,影响集群响应速度,所以...

    2024-04-01 00:42:48
  • 域控制器设置计算机密码,域控服务器设置用户密码有效期

    弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器,帮助用户打造可靠、安全、灵活、高效的应用环境,确保服务持久稳定运行,提升运维效率...

    2024-04-01 00:42:16
  • TCP 和 UDP 的总结

    TCP 和 UDP 的总结

    参考文章35 张图解:被问千百遍的 TCP 三次握手和四次挥手面试题什么是 TCPTCP 是面向连接的、可靠的、有序的、基于字节流的传输层通信协议。面向连接:一定是「一对一」才能连接,不能像 UDP ...

    2024-04-01 00:42:10