下面是我给大家整理的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使用笔记,希望今后会对大家有帮助。
相关文章:
以上就是入门级video.js使用笔记(代码附上)的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号