Closed
Description
Q:Can I Speak Chinese...? A:Yes, U can...
ok，说一下现在使用video标签的感受，我们希望自由控制组件的渲染的时机。
<video
if="videoRender"
class="video"
src="http://cloud.video.taobao.com/play/u/522794875/p/2/e/6/t/1/d/ld/fv/2/23335165.mp4"
auto-play="auto"
play-status="{{playStatus}}">
</video>
我希望通过videoRender来控制组件的加载时机，不让mp4文件做无谓的下载。
但是在videoRender设为true的时候，组件初始化，但是视频没有自动加载(auto-play="auto"失效),
使用setTimeout的方式也不能控制视频的自动播放。
参考问题代码
<template>
<scroller>
<div class="video-wrap">
<video if="videoRender" class="video"
src="http://cloud.video.taobao.com/play/u/522794875/p/2/e/6/t/1/d/ld/fv/2/23335165.mp4"
auto-play="false" play-status="{{playStatus}}">
</video>
<div class="video-placeholder"></div>
<div class="video-control">
<text class="close-btn">×</text>
</div>
</div>
<div style="flex-direction: row; justify-content: center;">
<ui-button value="Init" click="{{init}}"></ui-button>
<ui-button value="Pause" click="{{pause}}" style="margin-left:20px;"></ui-button>
<ui-button value="Play" click="{{play}}" type="primary" style="margin-left:20px;"></ui-button>
</div>
<text style="height:2000px;background: #333333;">
</text>
</scroller>
</template>
<style>
.video-wrap {
width:750px;
height:460px;
}
.video-placeholder {
width:0;
height:0;
}
.video-ready {
width:750px;
height:460px;
}
.video {
position: fixed;
top:0;
z-index: 100;
width: 750px;
height: 460px;
margin-bottom: 80px;
}
</style>
<script>
module.exports = {
data: {
playStatus: 'stop',
videoRender:false
},
methods: {
init: function() {
var self = this;
self.videoRender = true;
setTimeout(function() {
self.playStatus = 'play';
},500);
},
pause: function() {
this.playStatus = 'pause';
},
play: function() {
this.playStatus = 'play';
},
onpause: function() {
this.$call('modal', 'toast', {'message': 'video pause'});
},
onstart: function() {
this.$call('modal', 'toast', {'message': 'video start'});
},
onfinish: function() {
this.$call('modal', 'toast', {'message': 'video finish'});
},
onfail: function() {
this.$call('modal', 'toast', {'message': 'video fail'});
}
}
};
</script>