【JS&JQuery】videojs插件使用

作者: smartdream | 来源:发表于2020-03-05 16:01 被阅读0次

本文链接:【JS&JQuery】videojs插件使用
相关文档:【Vue】插件:八、结合 vue-video-player、videojs-flash、videojs-contrib-hls使用videojs播放视频
相关文档:【Nuxt】四、VueX使用教程

1. 下载

github最新代码地址
下载代码$ npm install --save-dev video.js

1.1. 下载链接

videojs-5.6.0~5.8.6版本下载

videojs-5.17.0~5.18.4版本下载

1.2. 下载方法

选择下载版本点击

下载压缩包

2. jsp使用案列

2.1. 头部

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String ctx = request.getContextPath();
    request.setAttribute("ctx", ctx);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head lang="zh-cn">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="IE=edge"/>
    <title>视频播放页面</title>
    <jsp:include page="../base/header.jsp"/>
    <link rel="stylesheet"
          href="${ctx }/resources/common/css/organization/conferenceTopic_check.css"/>
    <link rel="stylesheet" href="${ctx }/resources/common/css/organization/videoPage.css"/>
    <%--播放器videojs--%>
    <link rel="stylesheet" type="text/css" href="${ctx }/resources/videojs7.7.5/video-js.css" />
</head>

2.2. body末尾,调用js之前

<%--播放器videojs-7.7.5--%>
<script src="${ctx }/resources/videojs7.7.5/video.js" type="text/javascript"></script>
<script src="${ctx }/resources/videojs7.7.5/lang/zh-CN.js" type="text/javascript"></script>

2.3. html中

注意!!! html中video标签``data-setup="{}"`设置为空时,在IE下初始化videojs设置options会不生效

<div class="videoPlayer">
    <%--左侧播放列表--%>
    <div class="playerList">
        <h3>播放列表</h3>
        <ul id="playerList">
            <%--<li onclick="fnPlayVideo('vodId')">视频1</li>--%>
        </ul>
    </div>
    <%--右侧播放器--%>
    <div class="player">
        <video
                id="my-video"
                class="video-js vjs-big-play-centered"
                controls
                preload="auto"
                width="950"
                height="650"
                data-setup="{}"
        >
            <%--<source src="${ctx}/resources/common/2.mp4" type="video/mp4"/>--%>
            <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>
    </div>
</div>

2.4. js 中

注意!!! html中video标签data-setup="{}"设置为空时,在IE下初始化videojs设置options会不生效

<script type="text/javascript">
    var options = {
        controls: true,//是否显示控制条
        // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        loop: false, // 导致视频一结束就重新开始。
        language: 'zh-CN',
        notSupportedMessage: '此视频暂无法播放!', // 无法播放时显示的信息
        controlBar: {
            volumePanel: {
                inline: false
            },
            currentTimeDisplay: true, //当前播放位置
            timeDivider: false, // 时间分割线
            durationDisplay: false, // 总时间
            progressControl: true, // 进度条
            remainingTimeDisplay: false, // 剩余时间
            fullscreenToggle: true // 全屏按钮
        }
    };
    var listId = getParamer('listId ');

    var player = videojs('myvideo', options, function onPlayerReady() {
        videojs.log('播放器已经准备好了!');
        this.play();
        this.on('ended', function () {
            videojs.log('播放结束了!');
        });
    });

    $(function () {
        /**
         * @url {string} '/videoconferencing/xyHistoryVideo' 请求播放列表
         * @listId {string} 请求参数[列表编号]
         * @videoID {string} 返回参数[视频ID]
         * @videoName{string} 返回参数[视频默认名称]
         */
        $.ajax({
            url: '${ctx}/接口地址',
            data: {
                listId: listId,
            },
            type: "post",
            dataType: "json",
            async: true,
            success: function (data) {
                // if (1 === 1) {//示例
                if (data.code === 1) {
                    var data = data.data;
                    var list = $('#playerList');
                    list.empty();
                    // for (var i = 0; i < 2; i++) {//示例
                    for (var i = 0; i < data.length; i++) {
                        list.append(" <li onclick='fnPlayVideo(this,\"" + data[i].videoID + "\")'>" + data[i].videoName + "</li> ")
                        // list.append(" <li onclick='fnPlayVideo(this,\""+'1'+"\")'>" + '测试视频'+i + "</li> ")//示例
                    }
                } else {
                    parent.showConfirmDialog('消息提示', data.msg, '0001');
                }
            },
            error: function (data) {
                console.log(data);
            }
        });
    });

    function fnPlayVideo(that, vodId) {
        myvideo.reset();//播放器-重置画面
        $(that).addClass('active').siblings('li').removeClass('active');

        /**
         * @url {string} '/videoconferencing/xyVideoUrl'
         * @videoID {string} 请求参数[视频编号]
         * @shared {boolean} 返回参数[是否解密完成] false:未解密完成
         */
        $.ajax({
            url: '${ctx}/接口地址',
            data: {
                videoID: videoID,
            },
            type: "post",
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.code === 1) {
                    var data = data.data;
                    if (!data.shared) {
                        parent.showConfirmDialog('消息提示', '视频未解密完成,请稍后再试', '0001');
                        return
                    }
                    myvideo.src(data.playUrl);//播放器-设置播放资源
                    myvideo.load(data.playUrl);//播放器-加载播放资源
                    myvideo.play();//播放器-播放
                    //myvideo.dispose();//播放器-销魂
                } else {
                    parent.showConfirmDialog('消息提示', data.msg, '0001');
                }
            },
            error: function (data) {
                console.log(data);
            }
        });

    }

</script>

2.5. css

#my-video {
  width: 100%;
  height: 100%;
  .vjs-control-bar {
    font-size: 18px;
  }
  &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    //opacity: 1;//鼠标移除后显示控制条
  }
  .vjs-modal-dialog .vjs-modal-dialog-content {
    padding: 50px 20px;
  }
  button {
    outline: none;
  }
}

.videoPlayer{
    padding: 20px;
}
.playerList{
    width: 250px;
    float: left;
    overflow: hidden;
}

.playerList h3{
    height: 30px;
    font-size: 20px;
    color: #f00;
    margin-bottom: 10px;
}

.playerList ul{
    height: 610px;
    border: 1px solid #ccc;
    overflow-y: scroll;
}

.playerList ul li{
    padding: 0 10px;
    line-height: 35px;
    cursor: pointer;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.player{
    float: right;
}

.active{
    color: #f00;
}

3. 使用文档

3.1. 初始化

注意!!! html中video标签data-setup="{}"设置为空时,在IE下初始化videojs设置options会不生效

//播放器-初始化
var myvideo= videojs('myvideo', options, function onPlayerReady() {
  videojs.log('播放器已经准备好了!');
  this.play();
  this.on('ended', function () {
    videojs.log('播放结束了!');
  });
});

3.2. 方法

方法名称	说明
dispose	清理-销毁从播放器中删除所有事件侦听器及其DOM元素`myvideo.dispose ()`
pause	暂停 `myvideo.pause()`
play	播放 `myvideo.play ()`
load	加载播放资源`myvideo.load ( playUrl )`
reset	重置画面`myvideo.reset ( )`
playUrl	设置播放资源`myvideo.src( playUrl )`
on	监听事件 `myvideo.on('ended', function () { });`
trigger	触发事件 `this.trigger('dispose')`
currentTime	获取播放进度`myvideo.currentTime();` 设置播放进度`myvideo.currentTime(60);`
duration	视频持续时间，需先加载完成，且在`flash`情况下无效 `var duration = myvideo.duration();`
buffered	缓冲(返回下载了多少): `myvideo.buffered();`
bufferedPercent	百分比的缓冲: `myvideo.bufferedPercent();`
volume	声音大小（0-1之间）: 获取声音大小`myvideo.volume();`设置声音大小:`myvideo.volume(0.5);`
width	获取视频宽度:`myvideo.width();`设置视频宽度：`myvideo.width(640);`
height	获取视频高度: `var howTallIsIt = myvideo.height();`设置视频高度:`myvideo.height(480);`
size	设置大小：`myvideo.size(640,480);`
enterFullScreen	全屏: `myvideo.enterFullScreen();` HTML5 video 进入全屏和退出全屏

$\color{#f00}{!!!}\$ dispose销毁后如需再次使用,要初始化重新创建标签

var myVideoDiv = document.getElementById("myVideoDiv");
myVideoDiv.innerHTML = 
"<video 
  id='myvideo' 
  class='video-js vjs-default-skin  vjs-big-play-centered' 
  controls 
  preload='auto' 
  style='width: 100%;height: 100%' 
  controlBar='true'>
  <source src="+ this.firstSrc +" style='width: 100%;height: 100%' type='application/x-mpegURL'>
</video>"

3.3. 事件

事件名称	说明
play	播放 `myvideo.on('play', function () { });` `this.trigger('play')`
pause	暂停
ended	结束
error	错误
loadeddata	数据加载完成
volume	改变播放器音量
currentTime	提供当前正在播放的当前时间（以秒为单位）。
duration	提供正在播放的视频的总持续时间
bufferedPercent	提供缓冲视频的当前百分比。
durationchange	持续时间改变
firstplay	第一次播放
loadedalldata	全部数据加载完成
loadstart	开始加载
progress	进度
seeked	寻找
seeking	寻找中
timeupdate	时间更新
volumechange	音量改变
waiting	等待中
resize inherited	重置大小
var myFunc = function(){ // Do something when the event is fired };	自定义事件

删除事件

myvideo.removeEvent(“eventName”, myFunc);

监听 error 事件

myvideo.on('error',function () {
  var error=this.error_;
  if(error.code===4){ //1.用户终止 2.网络错误 3.解码错误 4.URL无效
  }
});

3.4. 视频加载方式

html方式

<video id="myvideo">
 <source src="//path/to/video.mp4" type="video/mp4">
 <source src="//path/to/video.webm" type="video/webm">
</video>

js 方式

videojs('myvideo', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

或

myvideo.src({type: "video/mp4", src: "xxxxxxx"});

3.5. options 选项

标准元素选项

这些选项中的每一个也可用作标准元素属性 ; 因此，可以使用设置指南中列出的所有三种方式定义它们。通常，未列出默认值，因为这是留给浏览器供应商的。

名称	说明
autoplay	true/false 播放器准备好之后，是否自动播放【默认false】
controls	true/false 是否拥有控制条【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
height	视频容器的高度，字符串或数字单位像素比如： height:300 or height:‘300px‘
width	视频容器的宽度, 字符串或数字单位像素
loop	true/false 视频播放结束后，是否循环播放 true:视频一结束就重新开始。
muted	true/false 是否静音默认情况下会静音任何音频
poster	播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
preload	预加载建议浏览器是否应在加载元素后立即开始下载视频数据 `auto` 自动 \| `metadata` 元数据信息，比如视频长度，尺寸等 \| `none`不预加载任何数据，直到用户开始播放才开始下载
src	类型： string 要嵌入的视频源的源URL。

Video.js特定的选项

undefined除非另有说明，否则默认情况下每个选项

名称	说明
aspectRatio	类型： string 将播放器置于流体模式，并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号（例如"16:9"或"4:3"）分隔的两个数字。
autoSetup	类型： boolean 阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。注意：必须在与videojs.options.autoSetup = falsevideojs源加载生效的同一时刻全局设置。
children	Array \| Object 可选子组件从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序哦。
fluid	类型： boolean 何时true，Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器。此外，如果元素具有"vjs-fluid"，则此选项自动设置为true。
inactivityTimeout	类型： number Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。在inactivityTimeout决定了不活动的许多毫秒声明用户闲置之前是必需的。值为0表示没有inactivityTimeout，用户永远不会被视为非活动状态。
language	键入：string，默认值：浏览器默认值或’en’与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言，但始终可以更改。
languages	类型： Object 自定义播放器中可用的语言。此对象的键将是语言代码，值将是具有英语键和翻译值的对象。注意：通常，不需要此选项，最好将自定义语言传递给videojs.addLanguage()所有玩家！
nativeControlsForTouch	类型： boolean 明确设置关联技术选项的默认值。
notSupportedMessage	类型： string 允许覆盖Video.js无法播放媒体源时显示的默认消息。
playbackRates	类型： Array 严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。如果指定，Video.js显示控件（类vjs-playback-rate）允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。`videojs('my-player', { playbackRates: [0.5, 1, 1.5, 2] });`
plugins	类型： Object 这支持在初始化播放器时使用自定义选项自动初始化插件 - 而不是要求您手动初始化它们。 `videojs('my-player', { plugins: { foo: {bar: true}, boo: {baz: false} } }); <br>`以上大致相当于：`var player = videojs('my-player'); player.foo({bar: true}); player.boo({baz: false});` 虽然，由于plugins选项是对象，因此无法保证初始化顺序！
sources	类型： Array 一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组
techCanOverridePoster	类型： boolean 使技术人员有可能覆盖玩家的海报并融入玩家的海报生命周期。当使用多个技术时，这可能很有用，每个技术都必须在播放新源时设置自己的海报。
techOrder	输入：Array，默认值：[‘html5’] 定义Video.js技术首选的顺序。默认情况下，这意味着Html5首选技术。其他注册的技术将在此技术之后按其注册顺序添加。
vtt.js	类型： string 允许覆盖vtt.js的默认URL，该URL可以异步加载到polyfill支持WebVTT。此选项将用于Video.js（即video.novtt.js）的“novtt”版本中。否则，vtt.js与Video.js捆绑在一起。

组件选项

Video.js播放器是一个组件。与所有组件一样，您可以定义它包含的子项，它们出现的顺序以及传递给它们的选项。

这是一个快速参考; 因此，有关Video.js中组件的更多详细信息，请查看组件指南。

children

类型： Array|Object | 如果Array- 这是默认值 - 这用于确定哪些子节点（按组件名称）以及在播放器（或其他组件）上创建它们的顺序：

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
  children: [
    'bigPlayButton',
    'controlBar'
  ]
});

该children选项还可以作为传递Object。在这种情况下，它用于提供options任何/所有孩子，包括禁用它们false：

// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!
videojs('my-player', {
  children: {
    controlBar: {
      fullscreenToggle: false
    }
  }
});

${componentName}

类型： Object | 可以通过组件名称的低驼峰案例变体（例如controlBarfor ControlBar）为组件提供自定义选项。这些可以嵌套在孙子关系的表示中。例如，要禁用全屏控件：

videojs('my-player', {
  controlBar: {
    fullscreenToggle: false
  }
});

技术选择

${techName}

类型： Object

Video.js回放技术（即“技术”）可以作为传递给该videojs功能的选项的一部分给予自定义选项。它们应该在技术名称的小写变体下传递（例如"flash"或"html5"）。

flash

swf,指定Video.js SWF文件在Flash技术位置的位置：

videojs('my-player', {
  flash: {
    swf: '//path/to/videojs.swf'
  }
});

但是，更改全局默认值通常更合适：

videojs.options.flash.swf = '//path/to/videojs.swf’
html5

nativeControlsForTouch

类型： boolean | 只有技术支持Html5，此选项可以设置true为强制触摸设备的本机控件。

nativeAudioTracks

类型： boolean | 可以设置为false禁用本机音轨支持。最常用于videojs-contrib-hls。

nativeTextTracks

类型： boolean | 可以设置为false强制模拟文本轨道而不是本机支持。该nativeCaptions选项也存在，但只是一个别名nativeTextTracks。

nativeVideoTracks

类型： boolean | 可以设置为false禁用本机视频轨道支持。最常用于videojs-contrib-hls。

3.6.视频资源切换

function playThisVideo(index){
  myvideo.reset(); 
  myvideo.src([
    {
      type: 'application/x-mpegURL',
      src: videoList[index].url
    },
  ]);
  myvideo.load();
  myvideo.play();
}

常见问题

IE中设置options参数不起作用

注意!!! html中video标签data-setup="{}"设置为空时,在IE下初始化videojs设置options会不生效,移除此项即可

IE11中全屏按钮置灰无法点击

如果当前页面是iframe,则需要设置iframe的allowfullscreen属性为true

禁止在iPhone safari中自动全屏

很多人给出的方法是，在<video>标签中加入playsinline参数，如 <video playsinline ></video>, $\color{#f00}{注意}\$ ，在iOS10之前用的是webkit-playsinline。

播放按钮居中

videojs默认的播放按钮在左上角，是作者认为会遮挡内容考虑的。
不过这是可以通过参数修改的，在<video>标签中加入vjs-big-play-centered类

暂停时显示播放按钮

videojs在未播放时，会显示一个大的播放按钮

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

点击屏幕切换播放/暂停

这个是视频播放的时候用得较多的功能，解决方法如下。

.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}

鼠标移除后显示控制条

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    //opacity: 1;//鼠标移除后显示控制条
  }

去除按钮点击后出现蓝色边框

.video-js button{
    outline: none;
  }

设置控制条样式

.vjs-control-bar {
   font-size: 18px;
 }

参考文档网址:
官方使用文档
 官方教程
 videojs 销毁重新初始化问题及其他使用推荐
videojs中文文档详解推荐
videojs使用技巧推荐
videojs插件使用推荐
videojs兼容IE8未验证成功
js插件---videojs的使用推荐
jQuery插件库>视频播放插件Video.js
视频播放插件 Video.js 使用和个版本下载推荐
Video.js事件
 videojs+hls+rtmp流媒体播放