造价人员做兼职的网站,淄博亿泰,编辑网站绑定,微网站风格文章目录 videojs安装使用videojs常用选项video.js特定选项 videojs-markers安装使用说明方法 videojs
video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频#xff0c;以及YouTube和Vimeo#xff08;通过插件#xff09;#xff0c;Video.js 自动检测浏览器… 文章目录 videojs安装使用videojs常用选项video.js特定选项 videojs-markers安装使用说明方法 videojs
video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频以及YouTube和Vimeo通过插件Video.js 自动检测浏览器对 HTML5 的支持情况如果不支持 HTML5 则自动使用 Flash 播放器。支持在桌面和移动设备上播放视频。 Video.js相比HTML5原生的video标签视频播放的优点
有良好的跨浏览器的样式更美观支持流媒体格式支持社交媒体平台例如YoutubeVimeo等有丰富的第三方插件没有浏览器兼容问题
videojs官网https://videojs.com/
安装使用
安装npm install videojs
headlink hrefhttps://vjs.zencdn.net/8.6.0/video-js.css relstylesheet /!-- If youd like to support IE8 (for Video.js versions prior to v7) --!-- script srchttps://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js/script --
/headbodyvideoidmy-videoclassvideo-jscontrolspreloadautowidth640height264posterMY_VIDEO_POSTER.jpgdata-setup{}source srcMY_VIDEO.mp4 typevideo/mp4 /source srcMY_VIDEO.webm typevideo/webm /p classvjs-no-jsTo view this video please enable JavaScript, and consider upgrading to aweb browser thata hrefhttps://videojs.com/html5-video-support/ target_blanksupports HTML5 video/a/p/videoscript srchttps://vjs.zencdn.net/8.6.0/video.min.js/script
/bodyvideojs常用选项
名称类型说明autoplay booleantrue/false播放器准备好之后是否自动播放 【默认false】controls booleantrue/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮heightstring|number视频容器的高度字符串或数字单位像素 比如 height:300 or height:‘300px‘widthstring|number视频容器的宽度, 字符串或数字 单位像素loop booleantrue/false 视频播放结束后是否循环播放muted booleantrue/false 是否静音posterstring播放前显示的视频画面播放开始之后自动移除。通常传入一个URLpreloadstring预加载建议浏览器是否应在加载元素后立即开始下载视频数据。支持的值如下‘auto’立即开始加载视频如果浏览器支持。‘metadata’仅加载视频的元数据其中包括视频的持续时间和尺寸等信息。有时元数据将通过下载几帧视频来加载。‘none’不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。srcstring要嵌入的视频源的源URL。
video.js特定选项
名称类型说明aspectRatiostring将播放器置于流体模式并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号例如16:9或4:3分隔的两个数字。autoSetupboolean阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。注意必须在与videojs源加载生效的同一时刻全局设置videojs.options.autoSetup false。childrenArray|Object此选项继承自基Component类。fluidboolean设置trueVideo.js播放器将具有流畅的大小。它将扩展以适应其容器。此外如果元素具有vjs-fluid则此选项自动设置为true。inactivityTimeoutnumberVideo.js表示用户通过vjs-user-active和vjs-user-inactive类以及useractive事件与玩家进行交互。在inactivityTimeout决定了不活动的许多毫秒声明用户闲置之前是必需的。值为0表示没有inactivityTimeout用户永远不会被视为非活动状态。languagestring默认值浏览器默认值或’en’。与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言但始终可以更改。languagesObject自定义播放器中可用的语言。此对象的键将是语言代码值将是具有英语键和翻译值的对象。注意通常不需要此选项最好将自定义语言传递给videojs.addLanguage()所有玩家nativeControlsForTouchboolean明确设置关联技术选项的默认值。notSupportedMessagestring允许覆盖Video.js无法播放媒体源时显示的默认消息。playbackRatesArray严格大于0的数字数组其中1表示常速1000.5表示半速502表示双速200等。如果指定Video.js显示控件类vjs-playback-rate允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。pluginsObject支持在初始化播放器时使用自定义选项自动初始化插件 - 而不是要求您手动初始化它们。
videojs-markers
安装使用
安装npm install videojs-markers 使用包括jquery.min.js, video-js.css and video.js
link hrefhttp://vjs.zencdn.net/4.3/video-js.css relstylesheet
link hrefsrc/to/videojs.markers.css relstylesheet
...
script srchttp://code.jquery.com/jquery-2.0.3.min.js /script
script srchttp://vjs.zencdn.net/4.3/video.js/script
script srcsrc/to/videojs.markers.js/script// initialize video.js
var player videojs(video-id);//load the marker plugin
player.markers({markers: [{time: 9.5,text: put},{time: 16,text: any},{time: 23.6,text: text},{time: 28,text: here}]
});说明
名称类型说明markerStyleObject默认值只涉及到width, border-radiusbackground-color但也会应用任何其他css。设置方形橙色标记{ width:7px, border-radius: 0%, background-color: orange }markerTipObject悬停在标记提示上的选项。breakOverlayObject每个标记处的打断覆盖选项。onMarkerReachedFunction每当播放达到标记的时间间隔时就会触发此回调函数。onMarkerClickFunction单击标记时会触发此回调函数。markersArray要显示的标记数组。
markerTip可设置的参数
displayBooleantextFunctiontimeFunction
breakOverlay可设置的参数
displayBoolean默认值falsedisplayTimeInteger默认值3sstyleObjecttextFunction
markers可设置的参数
{time : 10,text: marker text 1,overlayText: overlay text 1,class: custom-marker-class
}方法
方法说明getMarkers返回插件中当前标记的数组按升序排列。next转到视频中当前时间的下一个标记。如果没有下一个标记那么什么也不做。prev转到视频中当前时间的上一个标记。如果没有上一个标记那么什么也不做。updateTime从v0.5.0开始我们允许动态修改标记的时间从传入的原始标记对象开始。一旦更改了标记时间就应该调用updateTime来立即反映UI中的更改。remove删除给定索引数组中的标记。请注意索引是基于0的例如第一个标记的索引为0。removeAll移除播放器中的所有标记。add动态添加新标记。reset重置视频中的所有标记。这相当于removeAll然后添加新标记。destroy销毁插件。调用此函数后player.markers应未定义。
示例
// setup plugin
player.markers({markerStyle: {width:7px,border-radius: 30%,background-color: red},markerTip:{display: true,text: function(marker) {return Break: marker.text;},time: function(marker) {return marker.time;}},breakOverlay:{display: false,displayTime: 3,style:{width:100%,height: 20%,background-color: rgba(0,0,0,0.7),color: white,font-size: 17px},text: function(marker) {return Break overlay: marker.overlayText;}},onMarkerClick: function(marker) {},onMarkerReached: function(marker) {},markers: [{time: 9.5,text: marker,overlayText: overlay,class: custom-marker}]
});// plugin api
player.markers.next();
player.markers.prev();
player.markers.remove([1,2]);
player.markers.removeAll();
player.markers.add([{ time: 40, text: Im added}]);
player.markers.reset([{ time: 23, text: Im reset}]);
player.markers.destroy();
