uni-app的视频组件控制--Video注意事项及案例演⽰分析
注意事项
(2)src不⽀持.mkv等格式,只⽀持.mp4格式。
(3)⾕歌浏览器的bug,不知道哪⼀年开始,到现在。⼀旦你使⽤了video这种标签,video⾃⾝的属性在⾕歌浏览器中好像被屏蔽掉⼀样,最明显的是autoplay属性的⾃动播放功能,在⾕歌中已经没有作⽤了。(所以我们使⽤uniapp的视频组件的时候,最好换个浏览器,不然会出现⼀些奇奇怪怪的现象)
(4)⾕歌浏览器有时还会⿊屏,有声⾳,没画像,这时候换个浏览器就好了。
IE浏览器
⾕歌浏览器这些都是我暂时遇到的bug。
弹幕使⽤
固定弹幕滚动播放:
代码:
4.给⽂本输⼊框绑定@blur事件(⽤户光标离开了,证明输⼊框内容已经输⼊完了,准备点击发送弹幕的按钮)。
5.将input框获取到的⽤户输⼊弹幕内容显⽰到视频中。
6.⽤户点击了“发送弹幕”这个按钮时,做什么事情呢?绑定事件,发送弹幕 sendDanmu()(这时候我们就⽤到了视频上下⽂的操作对象了,在onLoad的时候就已经创建完成了)
效果预览:
完整代码:
<template>
<view>
<video
id="myVideo"
:src="videoSrc"
autoplay="true"
loop="true"
enable-danmu="true"
danmu-btn="true"
:danmu-list="danmuList"
muted="true"
>
</video>
<view class="inputBox">
blur事件
<input
type="text"
value=""
placeholder="输⼊弹幕内容"
@blur="input"
/>
</view>
<button type="default" @tap="bindSendDanmu">发送弹幕</button>    </view>
</template>
<script>
export default {
data() {
return {
videoSrc:'../../static/video2.mp4',
danmuList: [
{
text:'这个电视剧也太好看了吧!爱了爱了!', //弹幕⽂本内容                        color: '#a52664', //弹幕⽂字颜⾊
time: 2 // 这条弹幕在视频播放2秒后播放
},
{
text:'太虐⼼了,准备好纸⼱!呜呜!',//⽂本
color: '#e8853b',
time: 4
},
{
text:'剧情真不错,太催⼈泪下了!',//⽂本