You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.3 KiB
95 lines
2.3 KiB
<template> |
|
<view> |
|
<page-head :title="title"></page-head> |
|
<view class="uni-padding-wrap uni-common-mt" v-if="showVideo"> |
|
<view> |
|
<video id="myVideo" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3c1782e0-60ab-11eb-8ff1-d5dcf8779628.m4v" |
|
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png"></video> |
|
</view> |
|
<!-- #ifndef MP-ALIPAY || MP-TOUTIAO --> |
|
<view class="uni-list uni-common-mt"> |
|
<view class="uni-list-cell"> |
|
<view> |
|
<view class="uni-label">弹幕内容</view> |
|
</view> |
|
<view class="uni-list-cell-db"> |
|
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" /> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="uni-btn-v"> |
|
<button @click="sendDanmu" class="page-body-button">发送弹幕</button> |
|
</view> |
|
<!-- #endif --> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
title: 'video', |
|
src: '', |
|
danmuList: [{ |
|
text: '第 1s 出现的弹幕', |
|
color: '#ff0000', |
|
time: 1 |
|
}, |
|
{ |
|
text: '第 3s 出现的弹幕', |
|
color: '#ff00ff', |
|
time: 3 |
|
} |
|
], |
|
danmuValue: '', |
|
showVideo: false |
|
} |
|
}, |
|
onReady: function(res) { |
|
// #ifndef MP-ALIPAY || MP-TOUTIAO |
|
this.videoContext = uni.createVideoContext('myVideo') |
|
// #endif |
|
// #ifdef APP-PLUS || MP-BAIDU |
|
setTimeout(()=>{ |
|
this.showVideo = true |
|
},350) |
|
// #endif |
|
// #ifndef APP-PLUS || MP-BAIDU |
|
this.showVideo = true |
|
// #endif |
|
}, |
|
methods: { |
|
sendDanmu: function() { |
|
this.videoContext.sendDanmu({ |
|
text: this.danmuValue, |
|
color: this.getRandomColor() |
|
}); |
|
this.danmuValue = ''; |
|
}, |
|
videoErrorCallback: function(e) { |
|
uni.showModal({ |
|
content: e.target.errMsg, |
|
showCancel: false |
|
}) |
|
}, |
|
getRandomColor: function() { |
|
const rgb = [] |
|
for (let i = 0; i < 3; ++i) { |
|
let color = Math.floor(Math.random() * 256).toString(16) |
|
color = color.length == 1 ? '0' + color : color |
|
rgb.push(color) |
|
} |
|
return '#' + rgb.join('') |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
video { |
|
width: 690rpx; |
|
width: 100%; |
|
height: 400px; |
|
} |
|
</style>
|
|
|