SOURCE

console 命令行工具 X clear

                    
>
console
const myUrl = '//vjs.zencdn.net/v/oceans.mp4'
const yourUrl = '//chimee.org/vod/1.mp4'

new Yox({
  el: '#app',
  template: '#template',
  data: {
    online: true
  },
  afterMount() {
    let { myVideo, yourVideo } = this.$refs
    if (myVideo) {
      myVideo.src = myUrl
    }
    if (yourVideo) {
      yourVideo.src = yourUrl
    }
  },
  afterUpdate() {
    let { myVideo, yourVideo } = this.$refs
    if (myVideo) {
      myVideo.src = myUrl
    }
    if (yourVideo) {
      yourVideo.src = yourUrl
    }
  }
})
<div id="app"></div>
<script id="template" type="text/plain">
<div>
	<div class="player">
    {{#if online}}
    	<video ref="yourVideo" class="big-video" autoplay />
    	<video ref="myVideo" class="small-video" autoplay />
    {{else}}
    	<video ref="myVideo" class="big-video" autoplay />
    {{/if}}
  </div>
  <button on-click="toggle('online')">
  	toggle
  </button>
</div>
</script>
.player {
  position: relative;
  width: 300px;
  height: 300px;
}
.big-video {
  background-color: #000;
  width: 100%;
  height: 100%;
}
.small-video {
  background-color: #000;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
}

本项目引用的自定义外部资源