进度条标记
videojs播放器进度条标记插件(videojs6)
何时使用
- 需要给videojs播放器的进度条打上标记的时候
浏览器支持
IE 9+
安装
npm install videojs-progress-marker --save
运行
# 默认开启服务器,地址为 :http://local:8000/ # 能在ie9+下浏览本站,修改代码后自动重新构建,且能在ie10+运行热更新,页面会自动刷新 npm run start # 构建生产环境静态文件,用于发布文档 npm run site
代码演示
基本
在进度条添加标记
import videojs from 'video.js'import 'video.js/dist/video-js.css'import "videojs-progress-marker/lib"import "videojs-progress-marker/lib/style/" Component { const node = ReactDOM if !node return const videoJsOptions = controls: true sources: src: 'http://os71std62.bkt.clouddn.com/ocean.mp4' type: 'video/mp4' // react0.14.x data-reactid问题 const videoEl = document videoElclassName = `video-js` node thisplayer = } { if thisplayer thisplayer } { thisplayer } { return <div = /> } ReactDOM;
自定义标记
自定义标记,tootip和overlay的样式和文字
import videojs from 'video.js'import 'video.js/dist/video-js.css'import "videojs-progress-marker/lib"import "videojs-progress-marker/lib/style/" Component { const node = ReactDOM if !node return const videoJsOptions = controls: true sources: src: 'http://os71std62.bkt.clouddn.com/ocean.mp4' type: 'video/mp4' // react0.14.x data-reactid问题 const videoEl = document videoElclassName = `video-js` node thisplayer = } { if thisplayer thisplayer } { thisplayer } { return <div = /> } ReactDOM;
动态添加,删除标记
动态添加,删除标记,跳转到标记点
import videojs from 'video.js'import 'video.js/dist/video-js.css'import "videojs-progress-marker/lib"import "videojs-progress-marker/lib/style/" Component { const node = ReactDOM if !node return const videoJsOptions = controls: true sources: src: 'http://os71std62.bkt.clouddn.com/ocean.mp4' type: 'video/mp4' // react0.14.x data-reactid问题 const videoEl = document videoElclassName = `video-js` node thisplayer = } { if thisplayer thisplayer } { thisplayer } { thisplayermarkers } { thisplayermarkers } { const randomTime = Math; // come up with a random time thisplayermarkers; } { const markers = thisplayermarkers; forvar i = 0; i < markerslength; i++ markersitime += 1; thisplayermarkers; } { thisplayermarkers; } { thisplayermarkers; } { thisplayermarkers; } { return <div> <div = /> <div ="btn-group"> <button =>上一个</button> <button =>下一个</button> <button =>添加</button> <button =>向前移动一秒</button> <button =>移除第一个</button> <button =>移除所有</button> <button =>销毁</button> </div> </div> } ReactDOM;
API
代码是fork了videojs-markers稍加修改后得来的(videojs-marker没有发布npm包), API与之相比没有变化,可以查看这里。