---
title: Video
layout: plugin
styles:
- ../../plugins/video/css/video.css
scripts:
- ../../plugins/video/video.js

---
<section>
  <h2>HTML5 API</h2>
  <div class="html5Ele"></div>
  <div class="apis">
    <button data-type="html5" data-api="load" class="btn">load</button>
    <button data-type="html5" data-api="play" class="btn">play</button>
    <button data-type="html5" data-api="pause" class="btn ">pause</button>
    <button data-type="html5" data-api="stop" class="btn">stop</button>
    <button data-type="html5" data-api="volume" class="btn">volume </button>
    <button data-type="html5" data-api="setSize" class="btn">setSize</button>
    <button data-type="html5" data-api="switchVideo" class="btn">switchVideo</button>
    <button data-type="html5" data-api="currentTime" class="btn">currentTime</button>
    <button data-type="html5" data-api="duration" class="btn">duration</button>
    <button data-type="html5" data-api="setCurrentTime" class="btn">setCurrentTime(30s)</button>
    <button data-type="html5" data-api="mute" class="btn">mute</button>
    <button data-type="html5" data-api="unMute" class="btn">unMute</button>
    <button data-type="html5" data-api="destroy" class="btn">destroy</button>
  </div>
  <script>
    var html5Api = ''
    var trigger = true
    function html5init() {
      $('.html5Ele').asVideo({
        type: 'html5',
        url: 'http://vjs.zencdn.net/v/oceans.mp4',
        onReady: function() {
          log('ready', 'event');
        },
        onDestroy: function() {
          log('destroy', 'event');
        },
        onLoad: function() {
          log('onload');
        },
        onPause: function() {
          log('onpause');
        },
        onPlay: function() {
          log('onplay');
        },
        onEeded: function() {
          log('onended');
        },
        onStop: function() {
          log('onstop');
        },
        onLoaded: function() {
          log('onLoaded');
        }
      })
      html5Api = $('.html5Ele').data('video');
    }
    var html5Apis = {
      load() {
        html5init();
        html5Api.load()
        html5Api.setSize('800px', '400px')
      },
      pause() {
        html5Api.pause()
      },
      play() {
        html5Api.play()
      },
      stop() {
        html5Api.stop()
      },
      volume() {
        var val = parseInt(Math.random() * 100)
        html5Api.volume(val)
      },
      switchVideo() {
        html5Api.switchVideo('../../plugins/video/assets/towers.mp4')
      },
      currentTime() {
        log('duration:',html5Api.duration())
      },
      duration() {
        log('duration:',html5Api.duration())
      },
      mute() {
        html5Api.mute()
      },
      unMute() {
        html5Api.unMute()
      },
      destroy() {
        html5Api.destroy()
      },
      setCurrentTime() {
        html5Api.setCurrentTime('20')
      },
      setSize() {
        var size = '400'
        if(trigger) {
          html5Api.setSize(size, size)
          trigger = false
        } else {
          html5Api.setSize(size * 2, size)
          trigger = true
        }
      },
    }
  </script>
</section>

<section>
  <h2>youtube API</h2>

  <div class="youtubeEle"></div>
  <div class="apis">
    <button data-type="youtube" data-api="load" class="btn">load</button>
    <button data-type="youtube" data-api="play" class="btn">play</button>
    <button data-type="youtube" data-api="pause" class="btn ">pause</button>
    <button data-type="youtube" data-api="stop" class="btn">stop</button>
    <button data-type="youtube" data-api="volume" class="btn">volume </button>
    <button data-type="youtube" data-api="setSize" class="btn">setSize</button>
    <button data-type="youtube" data-api="switchVideo" class="btn">switchVideo</button>
    <button data-type="youtube" data-api="currentTime" class="btn">currentTime</button>
    <button data-type="youtube" data-api="duration" class="btn">duration</button>
    <button data-type="youtube" data-api="setCurrentTime" class="btn">setCurrentTime(30s)</button>
    <button data-type="youtube" data-api="mute" class="btn">mute</button>
    <button data-type="youtube" data-api="unMute" class="btn">unMute</button>
    <button data-type="youtube" data-api="destroy" class="btn">destroy</button>
  </div>
  <script>
    var youtubeApi = ''
    function youtubeInit() {
      $('.youtubeEle').asVideo({
        type: 'youtube',
        id: 'YE7VzlLtp-4',
        onReady: function() {
          log('ready', 'event');
        },
        onDestroy: function() {
          log('destroy', 'event');
        },
        onLoad: function() {
          log('onload');
        },
        onPause: function() {
          log('onpause');
        },
        onEeded: function() {
          log('onended');
        },
        onPlay: function() {
          log('onplay');
        },
        onStop: function() {
          log('onstop');
        },
        onLoaded: function() {
          log('onLoaded');
        },
        onPlayerr: function() {
          log('onPlayerr');
        },
        onPlayend: function() {
          log('onPlayend');
        }
      })
      youtubeApi = $('.youtubeEle').data('video');
      console.log('degb')
    }
    var youtubeApis = {
      load() {
        youtubeInit();
        youtubeApi.load()
        youtubeApi.setSize('800px', '500px')
      },
      pause() {
        youtubeApi.pause()
      },
      play() {
        youtubeApi.play()
      },
      stop() {
        youtubeApi.stop()
      },
      volume() {
        var val = parseInt(Math.random() * 100)
        youtubeApi.volume(val)
      },
      switchVideo() {
        youtubeApi.switchVideo('rxUox5wDjpY')
      },
      currentTime() {
        log('duration:',youtubeApi.duration())
      },
      duration() {
        log('duration:',youtubeApi.duration())
      },
      mute() {
        youtubeApi.mute()
      },
      unMute() {
        youtubeApi.unMute()
      },
      destroy() {
        youtubeApi.destroy()
      },
      setCurrentTime() {
        youtubeApi.setCurrentTime('50')
      },
      setSize() {
        if(trigger) {
          youtubeApi.setSize('400', '400')
          trigger = false
        } else {
          youtubeApi.setSize('800', '400')
          trigger = true
        }
      },
    }
  </script>
</section>

<section>
  <h2>vimeo API</h2>

  <div class="vimeoEle"></div>
  <div class="apis">
    <button data-type="vimeo" data-api="load" class="btn">load</button>
    <button data-type="vimeo" data-api="play" class="btn">play</button>
    <button data-type="vimeo" data-api="pause" class="btn ">pause</button>
    <button data-type="vimeo" data-api="stop" class="btn">stop</button>
    <button data-type="vimeo" data-api="volume" class="btn">volume </button>
    <button data-type="vimeo" data-api="setSize" class="btn">setSize</button>
    <button data-type="vimeo" data-api="switchVideo" class="btn">switchVideo</button>
    <button data-type="vimeo" data-api="currentTime" class="btn">currentTime</button>
    <button data-type="vimeo" data-api="duration" class="btn">duration</button>
    <button data-type="vimeo" data-api="setCurrentTime" class="btn">setCurrentTime(30s)</button>
    <button data-type="vimeo" data-api="mute" class="btn">mute</button>
    <button data-type="vimeo" data-api="unMute" class="btn">unMute</button>
    <button data-type="vimeo" data-api="destroy" class="btn">destroy</button>
  </div>
  <script>
    var vimeoApi = ''
    function vimeoInit() {
      $('.vimeoEle').asVideo({
        type: 'vimeo',
        id: '119287310',
        onLoad: function() {
          log('onload');
        },
        onPause: function() {
          log('onpause');
        },
        onPlay: function() {
          log('onplay');
        },
        onEeded: function() {
          log('onended');
        },
        onStop: function() {
          log('onstop');
        },
        onLoaded: function() {
          log('onLoaded');
        },
        onReady: function() {
          log('ready', 'event');
        },
        onDestroy: function() {
          log('destroy', 'event');
        }
      })
      vimeoApi = $('.vimeoEle').data('video');
    }
    var vimeoApis = {
      load() {
        vimeoInit();
        vimeoApi.load()
        vimeoApi.setSize('800px', '400px')
      },
      pause() {
        vimeoApi.pause()
      },
      play() {
        vimeoApi.play()
      },
      stop() {
        vimeoApi.stop()
      },
      volume() {
        var val = parseInt(Math.random() * 100)
        vimeoApi.volume(val)
      },
      switchVideo() {
        vimeoApi.switchVideo('154174852')
      },
      currentTime() {
        log('duration:',vimeoApi.duration())
      },
      duration() {
        log('duration:',vimeoApi.duration())
      },
      mute() {
        vimeoApi.mute()
      },
      unMute() {
        vimeoApi.unMute()
      },
      destroy() {
        vimeoApi.destroy()
      },
      setCurrentTime() {
        vimeoApi.setCurrentTime('30')
      },
      setSize() {
        if(trigger) {
          vimeoApi.setSize('400', '400')
          trigger = false
        } else {
          vimeoApi.setSize('800', '400')
          trigger = true
        }
      },
    }
  </script>
</section>
<h2>EVENT</h2>
<div class="console"></div>

<script>
$(function(){
  var Actions = {
    html5Apis,
    youtubeApis,
    vimeoApis
  }

  $('.apis').on('click', '[data-type]', function(event) {
    var type = $(this).data('type')
    var api = $(this).data('api');
    if (api) {
      Actions[type + 'Apis'][api]()
    }
  })
});

</script>

