Video.js：视频播放的全能解决方案

最新推荐文章于 2025-05-06 16:36:51 发布

前端徐徐

最新推荐文章于 2025-05-06 16:36:51 发布

阅读量1.2k

点赞数 6

分类专栏：宝藏工具文章标签：前端

本文链接：https://blog.youkuaiyun.com/github_39132491/article/details/144142368

版权

宝藏工具专栏收录该内容

13 篇文章

订阅专栏

本文首发同名微信公众号：前端徐徐

大家好，我是徐徐。今天跟大家分享一款多媒体类前端工具库：Video.js。

前言

在现代网页开发中，视频播放功能已经成为用户体验的一个重要组成部分。无论你是开发一个视频分享平台还是一个简单的博客，选择合适的视频播放器都至关重要。今天，我们要介绍的 Video.js 是一个强大且灵活的 HTML5 视频播放器，它能够满足你对视频播放的所有需求。

基本信息

官网：https://videojs.com
GitHub：https://github.com/videojs/video.js
Star：37.8K
类别：多媒体

什么是 Video.js？

Video.js 是一个从零开始为 HTML5 世界打造的网页视频播放器。它不仅支持 HTML5 视频和现代流媒体格式，还支持 YouTube 和 Vimeo。自2010年中期项目启动以来，Video.js 已经发展成为一个拥有数百名贡献者并广泛应用于超过 80 万个网站的播放器。

主要特点

全能播放：Video.js 支持传统的视频格式，如 MP4 和 WebM，同时也支持自适应流媒体格式，如 HLS 和 DASH。对于直播流，Video.js 还提供了专门的用户界面，使直播体验更加流畅。
易于定制：虽然 Video.js 自带的播放器界面已经非常美观，但它的设计也考虑到了可定制性。通过简单的 CSS 你可以轻松地为播放器增添个人风格，使其更符合你的网页设计需求。
丰富的插件生态：当你需要额外功能时，Video.js 的插件架构能够满足你的需求。社区已经开发了大量的插件和皮肤，包括 Chromecast、IMA 以及 VR 插件，帮助你快速扩展播放器的功能。

使用场景

Video.js 适用于各种视频播放场景：

视频分享平台：无论是播放本地视频还是流媒体内容，Video.js 都能提供稳定的播放体验。
直播应用：通过专用的直播流 UI，Video.js 能够实现高质量的实时视频播放。
教育和培训平台：支持多种格式和流媒体，确保你的教学视频能够在不同设备上顺畅播放。

快速上手

要在你的网页中使用 Video.js，只需以下简单步骤：

引入 Video.js 的库：

<!-- unpkg : use the latest version of Video.js -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://unpkg.com/video.js@8.17.3/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.17.3/dist/video.min.js"></script>

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video.min.js"></script>

添加视频播放器元素：

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>

初始化播放器：

var player = videojs('my-video');

就这样，你就可以在网页上嵌入一个功能丰富的视频播放器了。

该videojs函数还接受一个options对象和一个回调：

var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});