<template>
<view class="progress-works">
<view class="item-box">
<image :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg"
@error="imageError"></image>
<video id="myVideo2" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
</view>
<view class="item-box">
<video id="myVideo1" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
<video id="myVideo2" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls>
<cover-image :style="{height:imgWidth+'px',width:imgWidth+'px'}" src="/static/images/video-start-1.png"></cover-image>
</video>
</view>
</view>
</template>
<script>
export default{
data() {
return {
imgWidth:0,
}
},
onLoad(options) {
let self_ = this
//获取状态栏高度 加上导航的高度
uni.getSystemInfo({
success: function (res) {
// 32 左右空隙 9 进度宽度 16 左边距离 16 三张图片中间空隙
self_.imgWidth = (res.windowWidth - 32 - 9 - 16 - 16)/3
}
});
},
}
</script>
<style lang="scss" scoped>
.progress-works{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.item-box{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
margin-top: 100rpx;
}
</style>