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;
}