<template>
<view class="uni-padding-wrap uni-common-mt">
<view>
<video src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4" controls id="myVideo" enable-danmu danmu-btn="true" autoplay></video>
</view>
<view class="uni-list uni-common-mt">
<view class="uni-list-cell">
<view>
<view class="uni-label">
弹幕内容
</view>
<view class="uni-list-cell-db">
<input type="text" value="uni-input" placeholder="在此处输入弹幕内容" v-model="danmuValue"/>
</view>
</view>
<view class="uni-btn-v">
<button type="primary" class="page-body-button"@click="sendDanMu">点击发送</button>
</view>
</view>
</view>
</view> </template>
<script>
export default {
data() {
return {
danmuValue:''
}
},
onReady: function (res) {
this.videoContext = uni.createVideoContext('myVideo')
},
methods: {
alertMenu() {
this.clickTime++;
console.log(this.clickTime);
alert(this.clickTime);
},
// 发送弹幕
sendDanMu(){
// 通过调用发送弹幕方法来发送
this.videoContext.sendDanmu({
text:this.danmuValue,
color:'#DDA0DD'
});
// 置空
// this.danmuValue='';
}
} }
</script>
<style >
.uni-video-danmu {
background-color: red;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
margin-top: 18px;
margin-bottom: 18px;
font-size: 18px;
line-height: 18px;
overflow: visible;
}
</style>
