Home Web Front-end JS Tutorial Entry-level video.js usage notes (code attached)

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

May 18, 2018 am 10:46 AM
javascript code

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_)
    });
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to solve win7 driver code 28 How to solve win7 driver code 28 Dec 30, 2023 pm 11:55 PM

Some users encountered errors when installing the device, prompting error code 28. In fact, this is mainly due to the driver. We only need to solve the problem of win7 driver code 28. Let’s take a look at what should be done. Do it. What to do with win7 driver code 28: First, we need to click on the start menu in the lower left corner of the screen. Then, find and click the "Control Panel" option in the pop-up menu. This option is usually located at or near the bottom of the menu. After clicking, the system will automatically open the control panel interface. In the control panel, we can perform various system settings and management operations. This is the first step in the nostalgia cleaning level, I hope it helps. Then we need to proceed and enter the system and

What to do if the blue screen code 0x0000001 occurs What to do if the blue screen code 0x0000001 occurs Feb 23, 2024 am 08:09 AM

What to do with blue screen code 0x0000001? The blue screen error is a warning mechanism when there is a problem with the computer system or hardware. Code 0x0000001 usually indicates a hardware or driver failure. When users suddenly encounter a blue screen error while using their computer, they may feel panicked and at a loss. Fortunately, most blue screen errors can be troubleshooted and dealt with with a few simple steps. This article will introduce readers to some methods to solve the blue screen error code 0x0000001. First, when encountering a blue screen error, we can try to restart

The computer frequently blue screens and the code is different every time The computer frequently blue screens and the code is different every time Jan 06, 2024 pm 10:53 PM

The win10 system is a very excellent high-intelligence system. Its powerful intelligence can bring the best user experience to users. Under normal circumstances, users’ win10 system computers will not have any problems! However, it is inevitable that various faults will occur in excellent computers. Recently, friends have been reporting that their win10 systems have encountered frequent blue screens! Today, the editor will bring you solutions to different codes that cause frequent blue screens in Windows 10 computers. Let’s take a look. Solutions to frequent computer blue screens with different codes each time: causes of various fault codes and solution suggestions 1. Cause of 0×000000116 fault: It should be that the graphics card driver is incompatible. Solution: It is recommended to replace the original manufacturer's driver. 2,

Resolve code 0xc000007b error Resolve code 0xc000007b error Feb 18, 2024 pm 07:34 PM

Termination Code 0xc000007b While using your computer, you sometimes encounter various problems and error codes. Among them, the termination code is the most disturbing, especially the termination code 0xc000007b. This code indicates that an application cannot start properly, causing inconvenience to the user. First, let’s understand the meaning of termination code 0xc000007b. This code is a Windows operating system error code that usually occurs when a 32-bit application tries to run on a 64-bit operating system. It means it should

Detailed explanation of the causes and solutions of 0x0000007f blue screen code Detailed explanation of the causes and solutions of 0x0000007f blue screen code Dec 25, 2023 pm 02:19 PM

Blue screen is a problem we often encounter when using the system. Depending on the error code, there will be many different reasons and solutions. For example, when we encounter the problem of stop: 0x0000007f, it may be a hardware or software error. Let’s follow the editor to find out the solution. 0x000000c5 blue screen code reason: Answer: The memory, CPU, and graphics card are suddenly overclocked, or the software is running incorrectly. Solution 1: 1. Keep pressing F8 to enter when booting, select safe mode, and press Enter to enter. 2. After entering safe mode, press win+r to open the run window, enter cmd, and press Enter. 3. In the command prompt window, enter "chkdsk /f /r", press Enter, and then press the y key. 4.

GE universal remote codes program on any device GE universal remote codes program on any device Mar 02, 2024 pm 01:58 PM

If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may

What does the blue screen code 0x000000d1 represent? What does the blue screen code 0x000000d1 represent? Feb 18, 2024 pm 01:35 PM

What does the 0x000000d1 blue screen code mean? In recent years, with the popularization of computers and the rapid development of the Internet, the stability and security issues of the operating system have become increasingly prominent. A common problem is blue screen errors, code 0x000000d1 is one of them. A blue screen error, or "Blue Screen of Death," is a condition that occurs when a computer experiences a severe system failure. When the system cannot recover from the error, the Windows operating system displays a blue screen with the error code on the screen. These error codes

A quick guide to learning Python drawing: code example for drawing ice cubes A quick guide to learning Python drawing: code example for drawing ice cubes Jan 13, 2024 pm 02:00 PM

Quickly get started with Python drawing: code example for drawing Bingdundun Python is an easy-to-learn and powerful programming language. By using Python's drawing library, we can easily realize various drawing needs. In this article, we will use Python's drawing library matplotlib to draw a simple graph of ice. Bingdundun is a cute panda who is very popular among children. First, we need to install the matplotlib library. You can do this by running in the terminal

See all articles