Video.js - HTML5 视频播放器

最新推荐文章于 2024-03-24 10:00:00 发布

allway2

最新推荐文章于 2024-03-24 10:00:00 发布

阅读量3k

点赞数 1

文章标签： javascript html5 音视频

本文链接：https://blog.csdn.net/allway2/article/details/121073345

版权

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 频道！

allway2

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Video.js - HTML5 视频播放器

Video.js 是专为 HTML5 世界构建的网络视频播放器。它支持 HTML5 视频和媒体源扩展，以及其他播放技术，如 YouTube 和 Vimeo（通过插件）。它支持在台式机和移动设备上播放视频。这个项目是在2010年年中开始的，现在播放器已经使用了600,000 个网站。目录快速开始贡献行为守则执照快速开始感谢Fastly 的出色人员，提供了一个免费的、CDN 托管的 Video.js 版本，任何人都可以使用。将这些标签添加到您的文档中<head>：.
复制链接

扫一扫