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协议