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=;
			}
		}
		}
经验分享 程序员 微信小程序 职场和发展