Nutritious Pomegranate Muffins

    videojs-progress-marker

    1.0.0 • Public • Published

    进度条标记


    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/"
     
    class App extends React.Component {
      componentDidMount () {
        const node = ReactDOM.findDOMNode(this.videoWrap)
        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.createElement('video')
        videoEl.className = `video-js`
     
        node.appendChild(videoEl)
        this.player = videojs(videoEl, {...videoJsOptions}, () => {
          this.addMarker()
        })
      }
      componentWillUnmount () {
        if (this.player) {
          this.player.dispose()
        }
      }
      addMarker () {
        this.player.markers({
          markers: [
              {time: 9.5, text: "this"},
              {time: 16,  text: "is"},
              {time: 23.6,text: "so"},
              {time: 28,  text: "cool"}
          ]
        })
      }
      render() {
        return (
           <div data-vjs-player ref={node => { this.videoWrap = node }} />
        )
      }
    }
     
    ReactDOM.render(<App />, mountNode);

    自定义标记

    自定义标记,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/"
     
    class App extends React.Component {
      componentDidMount () {
        const node = ReactDOM.findDOMNode(this.videoWrap)
        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.createElement('video')
        videoEl.className = `video-js`
     
        node.appendChild(videoEl)
        this.player = videojs(videoEl, {...videoJsOptions}, () => {
          this.addMarker()
        })
      }
      componentWillUnmount () {
        if (this.player) {
          this.player.dispose()
        }
      }
      addMarker () {
        this.player.markers({
          markerStyle: {
          'width':'9px',
          'border-radius': '40%',
          'background-color': 'orange'
          },
          markerTip:{
              display: true,
              text: function(marker) {
                return "I am a marker tip: "+ marker.text;
              }
          },
          breakOverlay:{
              display: true,
              displayTime: 4,
              style:{
                'width':'100%',
                'height': '30%',
                'background-color': 'rgba(10,10,10,0.6)',
                'color': 'white',
                'font-size': '16px'
              },
              text: function(marker) {
                return "This is a break overlay: " + marker.overlayText;
              },
          },
          markers: [
              {time: 9.5, text: "this", overlayText: "1", class: "special-blue"},
              {time: 16,  text: "is", overlayText: "2"},
              {time: 23.6,text: "so", overlayText: "3"},
              {time: 28,  text: "cool", overlayText: "4"}
          ]
        })
      }
      render() {
        return (
           <div data-vjs-player ref={node => { this.videoWrap = node }} />
        )
      }
    }
     
    ReactDOM.render(<App />, mountNode);

    动态添加,删除标记

    动态添加,删除标记,跳转到标记点

    .btn-group button{
      border: 1px  solid #ccc;
      background: #fff;
      padding: 0 10px;
      margin: 10px;
    }
    import videojs from 'video.js'
    import 'video.js/dist/video-js.css'
    import "videojs-progress-marker/lib"
    import "videojs-progress-marker/lib/style/"
     
    class App extends React.Component {
      componentDidMount () {
        const node = ReactDOM.findDOMNode(this.videoWrap)
        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.createElement('video')
        videoEl.className = `video-js`
     
        node.appendChild(videoEl)
        this.player = videojs(videoEl, {...videoJsOptions}, () => {
          this.addMarker()
        })
      }
      componentWillUnmount () {
        if (this.player) {
          this.player.dispose()
        }
      }
      addMarker () {
        this.player.markers({
          breakOverlay:{
            display: true
          },
          onMarkerClick: function(marker){
            console.log(`Marker click:${marker.time}`)
          },
          onMarkerReached: function(marker){
            console.log(`Marker reached:${marker.time}`)
          },
          markers: [
              {time: 9.5, text: "this", overlayText: "1"},
              {time: 16,  text: "is", overlayText: "2"},
              {time: 23.6,text: "so", overlayText: "3"},
              {time: 28,  text: "cool", overlayText: "4"}
          ]
        })
      }
      handlePrev = () => {
        this.player.markers.prev()
      }
      handleNext = () => {
        this.player.markers.next()
      }
      handleAdd = () => {
        const randomTime = Math.floor((Math.random() * parseInt(this.player.duration())) + 1);
     
        // come up with a random time
        this.player.markers.add([{
          time: randomTime,
          text: "I'm new",
          overlayText: "I'm new"
        }]);
      }
      handleMoveForward = () => {
        const markers = this.player.markers.getMarkers();
        for(var i = 0; i < markers.length; i++) {
          markers[i].time += 1;
        }
        this.player.markers.updateTime();
      }
      handleRemoveFirst = () => {
        this.player.markers.remove([0]);
      }
      handleRemoveAll = () => {
        this.player.markers.removeAll();
      }
      handleDestroy = () => {
        this.player.markers.destroy();
      }
      render() {
        return (
          <div> 
            <div data-vjs-player ref={node => { this.videoWrap = node }} />
            <div className="btn-group">
              <button onClick={this.handlePrev}>上一个</button>
              <button onClick={this.handleNext}>下一个</button>
              <button onClick={this.handleAdd}>添加</button>  
              <button onClick={this.handleMoveForward}>向前移动一秒</button>  
              <button onClick={this.handleRemoveFirst}>移除第一个</button>  
              <button onClick={this.handleRemoveAll}>移除所有</button>  
              <button onClick={this.handleDestroy}>销毁</button>  
            </div> 
          </div>
        )
      }
    }
     
    ReactDOM.render(<App />, mountNode);

    API

    代码是fork了videojs-markers稍加修改后得来的(videojs-marker没有发布npm包), API与之相比没有变化,可以查看这里

    Keywords

    none

    Install

    npm i videojs-progress-marker

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    26 kB

    Total Files

    6

    Last publish

    Collaborators

    • mraiguo