Vue3中使用videojs@8

袁赞

2023-12-01

1. 安装

npm install --save-dev video.js
复制代码

2. 引入

在main.js里

import VideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
const app = createApp(App)
app.use(VideoPlayer)
复制代码

在需要使用的页面里 template部分

<video-player  :src="options.src" :poster="options.poster" class="video-player "
                crossorigin="anonymous" :preload="options.preload" playsinline controls :loop="true" :volume="0.6"
                :options="options" @mounted="handleMounted" @ended="ended($event)" @play="play($event)"
                @pause="pause($event)"></video-player>
复制代码

script 部分

/* videoplayer */
const player = shallowRef(null)
const options = reactive({
    width: '100vw', // 播放器宽度，默认100vw
    height: '200px',  // 播放器高度，默认100vh
    src: '', // 视频地址
    poster: '', // 视频海报
    type: 'm3u8', // 视频类型
    muted: false, // 视频静音
    autoplay: true,  // 自动播放
    loop: false, // 循环播放
    volume: 1,  // 音量大小 0-1
    preload: 'auto',  // 预加载
    objectFit: 'cover', // 同css object-fit，作用于video标签
    currentTime: 0, // 当前播放时间
    showCurrentTime: false, // 是否在拖动进度条时toast当前时间文字
    errorText: '播放出错', // 视频error时，toast提示
    control: true,
    preferFullWindow: true, //将此设置为true将更改不支持 HTML5 全屏 API 但支持视频元素全屏的设备（即 iPhone）上的全屏行为。播放器将被拉伸以填充浏览器窗口，而不是全屏播放视频
})

// 当我们需要给视频增加流体模式时，也可以在mounted阶段
const handleMounted = (payload) => {
    player.value = payload.player
    player.value.fluid(true)
    player.value.aspectRatio('16:9')
}
// 我们还可在播放、暂停、结束进行一些操作，或者当这些操作发生时我们需要做什么
const play = (log) => {
   // 播放之前做验证，需要验证的则暂停播放
   if (nowPlayUrlIndex.value !== 0 && !nowVideoIdCheck.value[nowgood_id].code) {
        player.value.pause()
        show.value = true
    } else {
        show.value = false
    }
}
const pause = (log) => {
    // 暂停的时候我们可以跳出广告弹窗
    
}
// 视频播放完 =》 跳转下一个
const ended = (log) => {
        player.value.src(nextPlayUrl.value)
        player.value.poster(videoList.value[index].resCover)
        player.value.load(nextPlayUrl.value)
        player.value.play(nextPlayUrl.value)
}
复制代码

CSS 部分

.video-js {
    width: 100%;
    /*不给高度是因为开启了流体模式自适应*/
}

:deep(.vjs-poster img) {
    object-fit: fill ; /*让封面图片也铺开*/

}
/*对原生的播放按钮进行样式修改*/
:deep(.video-js .vjs-big-play-button) {
    display: none;
    height: 3em;
    line-height: 3em;
    border: none;
    border-radius: 50%;
    margin-top: -1.31666em;
    margin-left: -1.5em;
}
/*隐藏一些不需要的按钮*/
.vjs-picture-in-picture-control vjs-control vjs-button {
    display: none !important;
}
复制代码

3. videojs相关链接

GitHub github.com/videojs/vid…

中文文档 gitcode.gitcode.host/docs-cn/vid…

官方文档 videojs.com/

4. 相关的配置、方法和事件

常用的videojs配置选项:

preload: 是否预加载
muted : 实现静音播放, 有一些浏览器需要静音才能实现加载之后自动播放
controls: 将显示视频控件, 如果不需要则去掉controls即可
autoplay: 视频在加载完成之后自动播放
poster: 视频封面图片
loop: true/false, 是否循环播放
notSupportMessage: 浏览器无法播放时的提示信息
techOrder: 播放控件,默认是html5,这里需要播放rtmp所以首选项要是flash
fluid: 流式布局,自适应父元素大小
更多的配置可以看videojs-options

常用方法和事件

1. autoplay()获取或者设置自动播放属性
2. currentTime()设置或者获取当前播放进度
3. duration()获取视频的总长度，一般要等到视频对象完全加载后才能获取到，一般我们会使用定时轮询的方式来获取总时长
4. ended()获取当前视屏对象是否已经处于结束状态
5. enterFullWindow() 当全屏不支持我们可以视频容器延伸到浏览器将让我们一样宽。经过试验改api完全无法使视屏进入全屏。分析源码后发现真正进入全屏的api应该是requestFullscreen()，但可惜该api只能又手势触发函数执行，连模拟点击都没法触发他。
6. exitFullscreen() 退出全屏，有效的
7. exitFullWindow() 退出全屏，试了没什么用
8. height() 设置/获取播放器的高度
9. width() 设置/获取播放器的宽度
10. isFullscreen() 检查是否处于全屏模式
11. load() 开始加载视屏
12. loop() 在视频中获取或设置循环属性元素
13. muted() 获取当前的静音状态
14. pause() 暂停视频
15. paused() 检查视屏是否暂停
16. play() 播放视屏
17. played() 检查视屏播放状态
18. preload() 获取或设置预加载属性
19. ready() 视屏对象加载完成后调用ready中的回调函数
20. poster() 获取或设置海报图像源url
21. reset() 重载视屏
22. src() 更换视频源
23. dispose() 销毁视频实例

Vue3中使用videojs@8

相关阅读

相关文章

相关问答

相关文档