Uni-App 视频实现弹幕功能
关于 Uni-App 里 视频播放并加入字幕功能
<view class="uni-padding-wrap uni-common-mt"> <view> <video src="https://media.w3.org/2010/05/sintel/trailer.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>
export default {
data() {
return {
danmuValue:
},onReady() {
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=;
}
}
}
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
个人号微信二次开发,微信ipad协议
