最近的项目中需要播放视频,鉴于html5元素的一些坑及不想自己造轮子,于是就找到了web端播放视频使用量最多的插件video.js,video.js是国外开发者开发的,英语本身就不好的我看英文文档简直是折磨,国内又没有中文文档,能搜的到的基本是简单的使用及最基本的api的介绍,想要实现一些自定义功能无从下手,所以我在这里整理一份我所遇到的问题及解决方法
1、视频初始化
video.js有两种初始化方式,一种是在video的html标签之中,一种是使用js来进行初始化
1.1、在video中进行初始化
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
width="600"
height="400"
data-setup='{}'>
To view this video please enable JavaScript, and consider upgrading to a
web browser that
supports HTML5 video
效果
1.2、使用js进行初始化
To view this video please enable JavaScript, and consider upgrading to a
web browser that
supports HTML5 video
var player = videojs(document.getElementById('myVideo'), {
controls: true, // 是否显示控制条
poster: 'xxx', // 视频封面图地址
preload: 'auto',
autoplay: false,
fluid: true, // 自适应宽高
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
inactiv