当前位置: 首页 > 工具软件 > moovie.js > 使用案例 >

Video.js - HTML5 视频播放器

靳高明
2023-12-01

Video.js 是专为 HTML5 世界构建的网络视频播放器。它支持 HTML5 视频和媒体源扩展,以及其他播放技术,如 YouTube 和 Vimeo(通过插件)。它支持在台式机和移动设备上播放视频。这个项目是在2010年年中开始的,现在播放器已经使用了600,000 个网站

目录

快速开始

感谢Fastly 的出色人员,提供了一个免费的、CDN 托管的 Video.js 版本,任何人都可以使用。将这些标签添加到您的文档中<head>

<link href="http://vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/7.10.2/video.min.js"></script>

要获取最新版本的 video.js 和要使用的 URL,请查看我们网站上的入门页面。

Video.js 版本 7(和更新版本)CDN 构建不会向 Google Analytics 发送任何数据。

在旧版本的 Video.js(6 及更早版本)中,在vjs.zencdn.netCDN 托管的版本中,我们包含了一个精简的 Google Analytics 像素,用于跟踪从 CDN 加载的播放器的随机采样(当前为 1%)。这使我们能够(大致)看到哪些浏览器在使用中,以及其他有用的指标,例如操作系统和设备。如果您想禁用分析,您可以在通过免费 CDN 包含 Video.js 之前简单地包含以下全局:

<script>window.HELP_IMPROVE_VIDEOJS = false;</script>

或者,您可以通过从npm获取 Video.js 、从GitHub 版本下载或通过unpkg或其他 JavaScript CDN(如 CDNjs)包含它来包含 Video.js。这些版本根本不包括 Google Analytics 跟踪。

<!-- 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@7.10.2/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@7.10.2/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/7.10.2/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>

接下来,使用 Video.js 就像创建一个<video>元素一样简单,但有一个额外的data-setup属性。至少,此属性的值必须为'{}',但它可以包含任何 Video.js选项- 只需确保它包含有效的 JSON!

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="http://vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="http://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>

当页面加载时,Video.js 会找到这个元素并自动在它的位置设置一个播放器。

如果您不想使用自动设置,您可以不使用该data-setup属性并<video>使用该videojs函数手动初始化一个元素:

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

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?!');
  });
});

如果您准备深入了解,入门页面和文档是获取更多信息的最佳位置。如果您遇到困难,请前往我们的Slack 频道

 类似资料: