H5播放器源码解读 (video.js)(h5视频播放器源码)

写在前面

现在视频业务越来越流行了,播放器也比较多,作为前端工程师如何打造一个属于自己的播放器呢?最快最有效的方式是基于开源播放器深度定制,至于选择哪个开源播放器仁者见仁智者见智,可以参考开源播放器列表(https://www.awesomes.cn/subject/videos)选择适合自己业务的播放器。

我们的播放器选择了排名第一的video.js播放器,截至目前该播放器在Github拥有13,991 star, 4,059 fork,流行程度可见一斑。为了让大家更多的了解它,我们细数下优点:

  1. 免费开源

    这个意味着什么就不多说了,附上项目地址(https://github.com/videojs/video.js)

  2. 兼容主流浏览器

    在国内的前端开发环境往往需要支持到低级版本的IE浏览器,然后随着Flash的退化,很多公司没有配备Flash开发工程师,video.js提供了流畅的Flash播放器,而且在UI层面做到了和video的效果,实属难得,比如全屏。

  3. UI自定义

    不管开源项目在UI方面做的如何漂亮,对于各具特色的业务来说都要自定义UI,一个方便简单的自定义方式显得格外重要,更何况它还自带了编译工具,只能用一个”赞“字形容。具体怎么实现的,这里先简单描述下是使用JavaScript(es6)构建对象,通过Less编写样式规则,最后借助Grunt编译。

  4. 灵活插件机制

    video.js提供一个插件定义的接口,使插件开发简单易行。而且社区论坛也提供了一些好用的插件供开发者使用。附插件列表

  5. 比较完善的文档

    完善的文档对于一个稳定的开源项目是多么的重要,video.js提供了教程、API文档、插件、示例、论坛等。官方地址

  6. 项目热度

    开源作者对项目的维护比较积极,提出的问题也能很快给予响应。开发者在使用过程中出现问题算是有一定保障。

书归正传,要想更自由的驾驭video.js,必然要了解内部原理。本文的宗旨就是通过核心代码演示讲解源码运行机制,如果有兴趣,不要离开,我们马上开始了……

组织结构

由于源码量较大,很多同学不知道从何入手,我们先来说下它的组织结构。

H5播放器源码解读 (video.js)(h5视频播放器源码)

其中control-bar,menu,popup,slider,tech,tracks,utils是目录,其他是文件。video.js是个非常优秀的面向对象的典型,所有的UI都是通过JavaScript对象组织实现的。

video.js是个入口文件,看源码可以从这个文件开始。

setup.js处理播放器的配置安装即data-setup属性。

poster-image.js处理播放器贴片。

plugins.js实现了插件机制。

player.js构造了播放器类也是video.js的核心。

modal-dialog.js处理弹层相关。

media-error.js定义了各种错误描述,如果想理解video.js对各语言的支持,这个文件是必看的,它是桥梁。

loading-spinner.js实现了播放器加载的标志,如果不喜欢默认加载图标在这里修改吧。

fullscreen-api.js实现各个浏览器的全屏方案。

extend.js是对node 继承 and babel\’s 继承的整合。

event-target.js 是event类和原生事件的兼容处理。

error-display.js 主要处理展示错误的样式设置。

component.js 是video.js框架中最重要的类,是所有类的基类,也是实现组件化的基石。

close-button.js 是对关闭按钮的封装,功能比较单一。

clickable-component.js 如果想实现一个支持点击事件和键盘事件具备交互功能的组件可以继承该类,它帮你做了细致的处理。

button.js 如果想实现一个按钮了解下这个类是必要的。

big-play-button.js 这个按钮是视频还未播放时显示的按钮,官方将此按钮放置在播放器左上角。

utils目录顾名思义是一些常用的功能性类和函数。

tracks目录处理的是音轨、字幕之类的功能。

tech目录也是非常核心的类,包括对video封装、flash的支持。

slider目录主要是UI层面可拖动组件的实现,如进度条,音量条都是继承的此类。

popup目录包含了对弹层相关的类。

menu目录包含了对菜单UI的实现。

control-bar目录是非常核心的UI类的集合了,播放器下方的控制器都在此目录中。

通过对组织结构的描述,大家可以,想了解video.js的哪一部分内容可以快速入手。如果还想更深入的了解如何正确使用这些类,请继续阅读继承关系一节。

继承关系

video.js是JavaScript面向对象实现很经典的案例,你一定会好奇在页面上一个DOM节点加上data-setup属性简单配置就能生成一个复杂的播放器,然而在代码中看不到对应的HTML”模板“。其实这都要归功于”继承“关系以及作者巧妙的构思。

在组织结构一节有提到,所有类的基类都是Component类,在基类中有个createEl方法这个就是JavaScript对象和DOM进行关联的方法。在具体的类中也可以重写该方法自定义DOM内容,然后父类和子类的DOM关系也因JavaScript对象的继承关系被组织起来。

为了方便大家查阅video.js所有的继承关系,整理了两个图表,一个是完整版,一个是核心版。

  • 完整版

H5播放器源码解读 (video.js)(h5视频播放器源码)

  • 核心板

H5播放器源码解读 (video.js)(h5视频播放器源码)

运行机制

video.js源码代码量比较大,我们要了解它的运行机制,首先确定它的主线是video.js文件的videojs方法,videojs方法调用player.js的Player类,Player继承component.js文件的Component类,最后播放器成功运行。

我们来看下videojs方法的代码、Player的构造函数、Component的构造函数,通过对代码的讲解基本整个运行机制就有了基本的了解,注意里面用到的所有方法和其他类对象参照组织结构一节细细阅读就可以掌握更多的运行细节。

  • videojs方法

H5播放器源码解读 (video.js)(h5视频播放器源码)

  • Player的构造函数

H5播放器源码解读 (video.js)(h5视频播放器源码)

  • Component的构造函数

H5播放器源码解读 (video.js)(h5视频播放器源码)

这里通过主线把基本的流程演示一下,轮廓出来了,更多细节还请继续阅读。

插件机制

一个完善和强大的框架都会继承插件运行功能,给更多的开发者参与开发的机会进而实现框架功能的补充和延伸。我们来看下video.js的插件是如何运作的。

  • 插件的定义

如果之前用过video.js插件的同学或者看过插件源码,一定有看到有这句话videojs.plugin= pluginName,我们来看下源码:

H5播放器源码解读 (video.js)(h5视频播放器源码)

不难看出,原理就是将插件(函数)挂载到Player对象的原型上,接下来看下是怎么执行的。

  • 插件的运行

H5播放器源码解读 (video.js)(h5视频播放器源码)

在Player的构造函数里判断是否有插件这个配置,如果有则遍历执行。

UI\”继承\”的原理

在继承关系一节中有提到video.js的所有DOM生成都不是采用的传统模板的方式,都是通过JavaScript对象的继承关系来实现的。

在Component基类中有个createEl方法,在这里可以使用DOM类生成DOM实例。每个UI类都会有一个el属性,会在实例化的时候自动生成,源代码在Component的构造函数中:

H5播放器源码解读 (video.js)(h5视频播放器源码)

每个UI类有一个children属性,用于添加子类,子类有可能扔具有children属性,以此类推,播放器的DOM结构就是通过这样的JavaScript对象结构实现的。

在Player的构造函数里有一句代码this.initChildren();启动了UI的实例化。这个方法是在Component基类中定义的,我们来看下:

H5播放器源码解读 (video.js)(h5视频播放器源码)

通过这段代码不难看出大概的意思是通过initChildren获取children属性,然后遍历通过addChild将子类实例化,实例化的过程会自动重复上述过程从而达到了”继承“的效果。不得不为作者的构思点赞。如果你要问并没看到DOM是怎么关联起来的,请继续看addChild方法的源码:

H5播放器源码解读 (video.js)(h5视频播放器源码)

这段代码的大意就是提取子类的名称,然后获取类并实例化,最后通过最关键的一句话this.contentEl().insertBefore(component.el(), refNode);完成了父类和子类的DOM关联。相信inserBefore大家并不陌生吧,原生的DOM操作方法。

总结

至此,video.js的精华部分都描述完了,不知道大家是否有收获。这里简单的总结一些阅读video.js框架源码的心得:

  1. 找准播放器实现的主线流程,方便我们有条理的阅读代码

  2. 了解框架代码的组织结构,有的放矢的研究相关功能的代码

  3. 理解类与类的继承关系,方便自己构造插件或者修改源码的时候知道从哪个类继承

  4. 理解播放器的运行原理,有利于基于Component构造一个新类的实现

  5. 理解插件的运行机制,学会自己构造插件还是有必要的

  6. 理解UI的实现原理,就知道自己如何为播放器添加视觉层面的东西了

  7. 看看我的源码解读吧,能帮一点是一点,哈哈

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月19日 下午10:20
下一篇 2024年5月19日 下午10:32

相关推荐

  • 软考高级系统架构师项目管理师

    软考高级系统架构师项目管理师: 职业生涯中的挑战与机遇 随着信息技术的快速发展,系统架构师和项目经理这两个职业越来越受到人们的关注。系统架构师负责设计和构建系统架构,确保系统能够满…

    科研百科 2025年1月30日
    0
  • java图书馆管理系统项目

    Java图书馆管理系统项目 Java图书馆管理系统是一种基于Java技术的图书馆管理工具,它可以帮助图书馆管理员高效地管理图书馆的各种信息,包括图书、读者、借阅记录等。本文将介绍一…

    科研百科 2025年1月14日
    0
  • 设计科研项目招标文件

    设计科研项目招标文件 随着科技的不断进步,科研项目的招标文件也在不断更新和改进。作为科研项目招标的参与者,我们需要一份完整而准确的招标文件来吸引潜在的竞标者。本文将介绍如何设计一份…

    科研百科 2025年3月9日
    0
  • 能源科技成果 验收

    能源科技成果验收能源科技成果验收1. 用于日常生活的能源和燃料的分水岭问题—— 探究风水、空气和氧气的过程2. 对于能源的消耗3. 什么是具有价值的能源?4. 怎样保持?5. 哪些…

    科研百科 2024年11月29日
    0
  • c语言学生管理系统项目经历

    C语言学生管理系统项目经历 作为一名学生,我曾经参与过一项C语言学生管理系统的项目。这个项目是一个学校为学生提供学习管理系统的需求,它涉及到学生信息的管理,课程信息的管理和成绩的管…

    科研百科 2025年1月23日
    1
  • 怎样参加各种科研项目

    怎样参加各种科研项目 参加科研项目是许多学生和专业人士梦寐以求的机会。通过这些项目,可以学习新的技能,与同行交流,提高自己的知识水平,并探索自己感兴趣的领域。以下是参加科研项目的一…

    科研百科 2025年2月27日
    0
  • 北大荒建投集团组织开展“强化管理年”、内部对标及制度体系建设工作联合检查

    为深入贯彻落实建投集团一届三次职代会精神、“强化管理年”活动、内部对标工作和制度体系建设的重要工作部署精神,扎实推动“强化管理年”活动走深走实、促进内部对标工作高标准实施、确保制度…

    科研百科 2023年9月25日
    173
  • 重大科研项目布局情况

    重大科研项目布局情况 随着科技的不断发展,科研项目也在不断的布局和发展。重大科研项目是科技创新的重要组成部分,对于推动国家的发展具有重要的意义。本文将介绍重大科研项目的布局情况。 …

    科研百科 2025年3月16日
    2
  • 王路:公平正义成为新时代人民司法的鲜亮底色

    编者按 2月16日下午,最高人民法院召开与各民主党派中央、全国工商联负责人和无党派人士代表座谈会。与会人士充分肯定新时代十年和过去一年人民法院工作取得的新变革新成就。同时,他们就加…

    科研百科 2023年3月9日
    226
  • cis暑期项目值得去吗?看完这里你就清楚啦!(cis暑期项目收费)

    cis暑期项目值得去吗?目前CIS科研项目已经成为最有影响力和含金量的暑期实地科研,越来越多的学子通过cis科研项目实现了名校录取,最近又有3位CIS学子收获哥伦比亚大学x2、杜克…

    科研百科 2024年4月19日
    100