Vue实现视频播放（video.js）

项目中需要实现播放m3u8类型的视频。h5的video标签不支持该类型的视频，所以使用了videojs

下载依赖

npm i --save video.js

引入

// main.js中引入样式
import 'video.js/dist/video-js.min.css'

// 视频播放页面
import videojs from 'video.js';

初步实现

<template><div class="videoArea"><video ref="videoPlayer" class="video-js"></video></div>
</template>

export default{data(){return {player: null},menthods: {// 实例化播放器createVideo(){let options = {autoplay: false,controls: true,sources: [{src: "@/src/video/20211216/jppXUfSi/1100kb/hls/index.m3u8",}]}}this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {console.log('onPlayerReady', this);})}},mounted() {this.createVideo()},
}

至此，点击按钮视频可正常播放。就是按钮样式不理想

调整播放按钮样式

<style scoped lang="less">/deep/ .video-js .vjs-big-play-button{font-size: 0.5rem;width: 1.5rem;height: 0.8rem;line-height: 0.75rem;top: 1.6rem;left: 3rem;}
</style>

动态数据实现

export default{data(){return {player: null,curVideo: {name: '',score: '',videoUrl: ''}},menthods: {// 获取页面数据getVideoInfo() {let params = {videoId: this.videoId}this.$api.index.getVideoDetails(params).then(res => {let {videoName,videoScore,videoUrl} = res.videoInfothis.curVideo = {name:videoName,score: videoScore,videoUrl}// 视频this.$nextTick(()=>{this.createVideo()})})},// 实例化播放器createVideo(){let options = {autoplay: false,controls: true,sources: [{src: this.curVideo.videoUrl}]}}this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {console.log('onPlayerReady', this);})}},mounted() {// this.createVideo()},
}

注意：下列操作会出现下图报错

嵌套接口异步返回的数据时，要在接口数据回来后的nextTick中去实例化video
options下的sources数组中，配置了不正确的type

视频播放就基本实现了，其他参数请参考：
video.js官方文档

Vue实现视频播放（video.js）相关推荐

在vue中使用video.js实现视频播放
学习笔记这里是官方关于在vue中如何使用的文档,下面的只是基于官方文档的基础用法,详细内容建议查看官方文档! 官方文档以此为例先看效果: 大致步骤如下: 一.安装video.js npm ins ...
Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器安装: npm install video.js ma ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...
vue 视频直播video.js
video.js 在 Vue 中应用我们做的直播项目用 Vue 编写,后台主要输出 RTMP 和 HLS 的直播流播放器使用的是 vue-video-player,其实就是 video.js 集成 ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...
插件用法--视频播放video.js
1.video.js 这篇里面全部覆盖,总结得真好. https://www.awaimai.com/2053.html 大坑--安卓手机上video层级最高,在播放视频后video尴尬地在页面所有元 ...
dplayer js控制自动全屏_vue 中使用video.js 实现m3u8视频播放格式
官方文档:https://docs.videojs.com/tutorial-vue.html H5 的 video 标签不支持m3u8视频播放,所以借助于 video.js 1.video 定义与用 ...
video.js 视频截图、录制、自定义全屏，hls、flv、mp4视频播放
功能 video.js内嵌截图.录制功能 (图片.视频会下载到本地) 自定义全屏播放hls.flv.mp4 功能集合成Vue组件参考 video.js components RecordRTC ...
video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...
vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...

Vue实现视频播放（video.js）

下载依赖

引入

初步实现

动态数据实现

Vue实现视频播放（video.js）相关推荐

最新文章

热门文章