首页 > web前端 > js教程 > 正文

入门级video.js使用笔记(代码附上)

亚连
发布: 2018-05-18 10:46:58
原创
3052人浏览过

下面是我给大家整理的video.js使用笔记,这里简单的对官方的英文参数列表做了一个简单说明,并写了一Jquery的适配调用。

/**
 * 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: 'zh-CN',            /**
             * 语言列表
             * 参数类型: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: '//path/to/video.flv',
            //type: 'video/x-flv'
            //},{
            //src: '//path/to/video.mp4',
            //type: 'video/mp4'
            //},{
            //src: '//path/to/video.webm',
            //type: 'video/webm'
            //}],
            /**
             * 使用播放器的顺序
             * 参数类型:Array
             * 下面的示例说明优先使用html5播放器,如果不支持将使用flash
             */
            //techOrder: ['html5', 'flash'],
            /**
             * 允许重写默认的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_)
    });
登录后复制

上面是我整理给大家的video.js使用笔记,希望今后会对大家有帮助。

相关文章:

畅谈在原生JS与其他JS 区别

利用JS使用POST方式提交请求的方法(结合代码详细解答)

知周AI笔记
知周AI笔记

一款本地轻量级markdown AI笔记软件

知周AI笔记53
查看详情 知周AI笔记

有关在js中下载文件简单操作(附上代码,详细解答)

以上就是入门级video.js使用笔记(代码附上)的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号