video js安装

最新推荐文章于 2024-03-13 15:13:02 发布

jesus392235020

最新推荐文章于 2024-03-13 15:13:02 发布

阅读量1.3w

点赞数 1

分类专栏： js

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

video.js很容易设置。让它在你的网页上工作，可以花一些的时间。

步骤1：包括在您的网页的JavaScript和CSS文件video.js头。

你可以下载video.js源并放到自己的服务器，或使用免费的CDN托管版本。人们常常建议现在把JavaScript结束标签之前（< /体”）而不是头部（），但video.js包括“HTML5 Shiv ‘，这需要在头老IE版本尊重视频标签作为一个有效的元素。

注意：如果你已经使用HTML5 Shiv像Modernizr可以包含任何video.js JavaScript，但是确保你的版本的Modernizr包括视频SHIV。

如果你不使用类似Modernizr但仍要关闭标签video.js身体之前，你可以添加你自己的刀。包括在你的文件的头部：

<script type="text/javascript">
document.createElement('video');document.createElement('audio');document.createElement('track');
</script>

CDN版本

<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>

通过软件包管理器安装
NPM

$ npm install --save video.js

Bower

$ bower install --save video.js

Self Hosted

完全自主，你需要把字体文件，让video.js知道SWF位于。如果你只是复制dist文件夹或ZIP文件的内容到你的项目都应该只是工作™，但路径可以很容易地通过编辑以下文件和重新构建的改变，或者通过修改生成的CSS文件。

<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>

步骤2：添加一个HTML5视频标签页。

与video.js你使用HTML5视频标签嵌入视频。video.js将读取标签，使它在所有的浏览器，不只是那些支持HTML5视频。除了基本的标记，video.js需要几件。

注：此处所描述的数据设置属性不应该使用，如果你使用下一节中描述的其他设置。

“数据设置”属性告诉video.js自动建立视频网页时准备好，读任何选项（JSON格式）从属性（见方案）。有初始化其他球员的方法，但这是最简单的。
在同一页的每一个视频都应该使用和唯一的“标识”属性。
“类”属性包含2个类：
视频是video.js JS应用功能所需的风格，喜欢全屏字幕。
默认的皮肤皮肤基础应用默认的HTML控件，可以删除或重写来创建自己的控件设计。

另有包括/排除的属性，设置，来源，和轨道正是因为你会为HTML5视频。

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

默认情况下，“大游戏”按钮位于左上角，所以不包括海报的有趣部分。如果你更喜欢中心大播放按钮，你可以添加一个额外的电视主持人大游戏为中心的课堂到您的视频元素。例如：

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
  ...
</video>

动态加载的HTML的替代设置

如果你的网页或应用程序的负载动态视频标签（Ajax，appendChild，等等），所以它可能不存在，当页面加载时，你需要手动设置的球员而不是依靠数据设置属性。要做到这一点，首先删除的数据设置属性的标签，所以有没有混乱时，玩家被初始化。其次，在video.js JavaScript库加载运行下面的JavaScript的一些时间，并且在视频的标签已被加载到DOM。

videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

在videojs函数的第一个参数是你的视频标签的ID。用你自己的。
第二个参数是一个选项对象。它允许您设置其他选项，如您可以使用数据设置属性。
第三个参数是一个“准备”回调。一旦video.js初始化就调用这个函数。
你可以通过一个元素标识来传递一个引用到元素本身。

videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});

videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});