Uni-App 视频实现弹幕功能

最新推荐文章于 2024-07-30 09:41:01 发布

weixin_43858329

最新推荐文章于 2024-07-30 09:41:01 发布

阅读量4.5k

点赞数

文章标签：小程序 html5

本文链接：https://blog.csdn.net/weixin_43858329/article/details/106301704

版权

关于 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='';
			}
		}
		}

转自源文档