Entry-level video.js usage notes (code attached)

The following are the video.js usage notes I compiled for you. Here is a brief explanation of the official English parameter list, and a Jquery adaptation call.

/**
 * Created by wuxp on 2017/4/26.
 * Jquery video
 */(function ($) {    if (videojs === undefined) {
        console.error("请导入video.js!");        return;
    }    /**
     * 仅支持选择器选中的第一个元素
     * @param options   videoJs配置 具体请参考 http://docs.videojs.com/tutorial-options.html
     * @param ready
     * @return videoJs的原生对象
     */
    $.fn.videoJs = function (options,ready) {        var video = this.eq(0)[0];        var player = videojs(video, options,ready);        return player;
    };
})(jQuery);
$(document).ready(function () {        var player = $("video[data-video='example_video_1']").videoJs({            /**
             * 自动播放：true/false
             * 参数类型：Boolean
             **/
            autoplay: false,            /**
             * 是否显示底部控制栏：true/false
             * 参数类型：Boolean
             **/
            controls: true,            /**
             * 视频播放器显示的宽度
             * 参数类型：String|Number
             * 例如：200 or "200px"
             **/
            width: 300,            /**
             * 视频播放器显示的高度
             * 参数类型：String|Number
             * 例如：200 or "200px"
             **/
            height: 300,            /**
             * 将播放器置于流体模式下，计算播放器动态大小时使用该值。
             * 该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）。
             * 参数类型：String
             **/
            //aspectRatio:"1:1",
            /**
             * 是否循环播放:true/false
             * 参数类型：Boolean
             **/
            loop: false,            /**
             * 设置默认播放音频：true/false
             * 参数类型：Boolean
             **/
            muted: false,            /**
             * 建议浏览器是否在加载<video>元素时开始下载视频数据。
             * 预加载:preload
             * 参数类型：String
             * 参数值列表：
             * auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
             * metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
             * none:
             */
            preload: "metadata",            /**
             * 视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
             * 参数类型：String
             **/
            // poster:"",
            /**
             * 要嵌入的视频资源url，The source URL to a video source to embed.。
             * 参数类型：String
             **/
            // src:"",
            /**
             * 此选项从组件基类继承。
             * 参数类型：Array|Object
             **/
            //  children:[],
            /**
             * 是否自适应布局
             * 播放器将会有流体体积。换句话说，它将缩放以适应容器。
             * 如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
             * 参数类型：Boolean
             **/
            fluid: false,            /**
             * 闲置超时
             * 值为0表示没有
             * 参数类型：Number
             **/
            inactivityTimeout: 0,            /**
             * 语言
             * 参数类型：String
             * 支持的语言在lang目录下
             */
            language: &#39;zh-CN&#39;,            /**
             * 语言列表
             * 参数类型：Object
             * 自定义播放器中可用的语言
             * 注：一般情况下，这个选项是不需要的，最好是通过自定义语言videojs。addlanguage().
             */
            languages: "",            /**
             * 是否使用浏览器原生的控件
             * 参数类型：Boolean
             */
            nativeControlsForTouch: false,            /**
             * 是否允许重写默认的消息显示出来时，video.js无法播放媒体源
             * 参数类型：Boolean
             */
            notSupportedMessage: false,            /**
             * 插件
             * 参数类型：Object
             */
            plugins: {},            /**
             * 资源排序
             * 参数类型：Boolean
             * 在video.js 6，这个选项将默认为true,
             * videojs Flash将被要求使用Flash技术
             */
                    //sourceOrder:false,
            /**
             * 资源列表
             * 参数类型：Array
             */
            //sources: [{
            //src: &#39;//path/to/video.flv&#39;,
            //type: &#39;video/x-flv&#39;
            //},{
            //src: &#39;//path/to/video.mp4&#39;,
            //type: &#39;video/mp4&#39;
            //},{
            //src: &#39;//path/to/video.webm&#39;,
            //type: &#39;video/webm&#39;
            //}],
            /**
             * 使用播放器的顺序
             * 参数类型：Array
             * 下面的示例说明优先使用html5播放器，如果不支持将使用flash
             */
            //techOrder: [&#39;html5&#39;, &#39;flash&#39;],
            /**
             * 允许重写默认的URL vtt.js，可以异步加载到polyfill支持WebVTT。
             * 此选项将在“novtt”建立video.js（即video。novtt js）。否则，vtt.js捆绑video.js。
             * 参数类型：String
             */
           // "vtt.js":""
        }, function () {
        });
        console.log(player);
        console.log(player.bigPlayButton.controlTextEl_)
    });

The above are the video.js usage notes I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Talk about the difference between native JS and other JS

How to use JS to submit requests using POST method (Detailed answer combined with code)

About the simple operation of downloading files in js (Attach code, detailed answer)

The above is the detailed content of Entry-level video.js usage notes (code attached). For more information, please follow other related articles on the PHP Chinese website!