以下是我給大家整理的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使用POST方式提交請求的方法(結合程式碼詳細解答)
以上是入門級video.js使用筆記(程式碼附上)的詳細內容。更多資訊請關注PHP中文網其他相關文章!