Video.js - HTML5 视频播放器

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！

<videoid="my-player"class="video-js"controlspreload="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 aweb 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 频道！

Video.js - HTML5 视频播放器相关推荐

video.js html5 视频播放器
1 我个人感觉很不错 2 https://github.com/videojs/video.js 3 <head> 4 <title>Video.js | HTML5 Vide ...
springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）
文章目录学习链接前言 ffmpeg 安装ffmpeg 配置环境变量分割视频文件后台配置 WebConfig 前端代码 video.js示例安装依赖视频播放组件效果 Vue3-video- ...
Artplayer.js - HTML5 视频播放器
一直想往前端流媒体方面研究,学习视频播放器 API 期间,断断续续的终于整体实现了一个简单的播放器,以及一些相关的插件.工具和组件. 之前在 v 站发过一次求测试,现在终于有一个相对稳定的版本,但兼容 ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
php h5视频播放器,基于JSON数据HTML5视频播放器js插件
frame-player是一款基于JSON数据HTML5视频播放器js插件.该插件没有使用视频文件,只使用JSON格式的数据.在移动手机设备上使用图片帧的形式来播放视频文件. HTML5视频文件的一个 ...
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...
html5视频播放器字幕,可访问的HTML5 Video视频播放器
by PayPal Accessibility 团队它是什么? 一个轻量级的HTML5视频播放器,支持字幕和详细说明.有关详细信息,请阅读这篇博客. 注* Video元素的浏览器支持情况产品特点 ...
HTML5视频播放器jQuery插件
HTML5 Video player jQuery plugin As you know – HTML5 <video> element is already supported by m ...
html5视频播放器一（改写默认样式）
一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等先看看效果是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...

Video.js - HTML5 视频播放器

目录

快速开始

Video.js - HTML5 视频播放器相关推荐

最新文章

热门文章