使用vue-video-player实现直播

NMP安装插件:

　　npm install vue-video-player --save

npm install videojs-contrib-hls --save

main.js中引入基础样式文件:

// 引入videoPlayer样式

import 'video.js/dist/video-js.css'

按需引入：

import 'videojs-contrib-hls'

import { videoPlayer } from 'vue-video-player'

components: {

videoPlayer

全局引入:

import Vue from 'vue'

import VueVideoPlayer from 'vue-video-player'

// 自定义样式引入，在<video-player>添加对应类名，例如video-player-custom

// import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer, /* {

　 options: 全局默认配置,

events: 全局videojs事件

}*/)

完整代码：

<template><!-- playsinline：设置播放器在移动设备上不全屏[ Boolean, default: false ] --><!-- customEventName：自定义状态变更时的事件名[ String, default: 'statechanged' ] --><video-playerclass="video-player-custom"ref="videoPlayer":options="playerOptions":playsinline="true"customEventName="customstatechangedeventname"@play="onPlayerPlay"@pause="onPlayerPause"@ended="onPlayerEnded"@ready="playerReadied"@statechanged="playerStateChanged"@playing="onPlayerPlaying"@waiting="onPlayerWaiting"@loadeddata="onPlayerLoadeddata"@timeupdate="timeupdate"@canplay="onPlayerCanplay"@canplaythrough="onPlayerCanplaythrough"></video-player>
</template>
<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
export default {components: {videoPlayer},data() { return {playerOptions: { // 是否静音muted: true,// 默认为英语，设置为中文language: 'zh-CN',// 播放速度，指定后Video.js将显示一个控件(vjs-playback-rate类的控件)，允许用户选择播放速度playbackRates: [0.5, 1.0, 1.5, 2.0],// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，表示长宽比例aspectRatio: '4:3',// 兼容顺序，默认值是['html5']，其他已注册的技术将按其注册的顺序在该技术之后添加。techOrder: ['html5'],// 等同于原生<video>标签中的一组<source>子标签，可实现优雅降级；type 属性规定媒体资源的 MIME 类型sources: [//{//type: "video/mp4",//src: ""//},//{//type: "rtmp/flv",//src: ""//},{type: "application/x-mpegURL",src: "https://live.cgtn.com/1000/prog_index.m3u8"},],// 视频封面poster: require('./icon/cover.jpg'),　}}},computed: { //插件节点 用于添加自定义按钮事件player() { return this.$refs.videoPlayer.player }},mounted() {},methods: {// 播放回调onPlayerPlay(player) {},// 暂停回调onPlayerPause(player) {//console.log(player)},// 视频播放结束回调onPlayerEnded(player) {//console.log(player)},// DOM元素上的readyState更改导致播放停止onPlayerWaiting(player) {//console.log(player)},// 已开始播放回调onPlayerPlaying(player) {//console.log(player)},// 当播放器在当前播放位置下载数据时触发onPlayerLoadeddata($event) {//console.log($event)},// 当前播放位置发生变化时触发。onPlayerTimeupdate($event) {//console.log($event)},//媒体的readyState为HAVE_FUTURE_DATA或更高onPlayerCanplay($event) {//console.log($event)},//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。onPlayerCanplaythrough($event) {//console.log($event)},//播放状态改变回调playerStateChanged($event) {//console.log($event)},//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。playerReadied($event) {//console.log($event)},}
}
</script>
<style lang="scss" scoped>
.video-player-custom{width: 100%;height: 180px;// vidoeUI重写/deep/ .video-js{width: 100%;height: 100%;padding: 0;overflow: hidden;// 播放器 .vjs-tech{object-fit: cover;}// 播放按钮.vjs-big-play-button {position: absolute;top: 50%;left: 50%;width: 2em;height: 2em;margin-top: -1em;margin-left: -1em;font-size: 2em;line-height: 2em;border-radius: 50%;background-color: rgba(0,0,0,0.45);outline: none;}// 封面.vjs-poster{width: 100%;height: 100%;background-size: cover;}}
}
</style>

DEMO下载地址：https://download.csdn.net/download/qaakd/86242530

使用vue-video-player实现直播相关推荐

vue pc端实现直播功能+弹幕
vue项目中实现直播功能同时具备弹幕和聊天室功能一.vue中实现直播功能 1.首先,需要知道直播的常用协议,RTMP 和 HLS,我这边采用的直播流为HLS.下面就是对播放选取,做过 H5 播放器的 ...
Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...
视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
Vue项目中播放直播流
直播流播放协议视频直播服务支出输出RTMP.FLV.HLS三种协议阿里云视频直播 RTMP(Real Time Message Protocol:实时消息传输协议)延时低(1s~3s),TCP长连 ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
Android Video Player. 安卓视频播放器，封装 MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音，悬浮播放，广告播放，列表播放，弹幕
DKVideoPlayer 项目地址:dueeeke/DKVideoPlayer 简介: Android Video Player. 安卓视频播放器,封装 MediaPlayer.ExoPlayer. ...
VR视频播放器Video Player
一.通过blender进行建模 1.下载并进行安装快捷键: ①A:全选 ②X:把场景中所有的组件都删掉,按下X后点击Delete X ,则场景会被清空 ③Shift+A:生成一个物体或 ...
Elmedia Video Player Pro 7.15 中文版强大的mac视频播放器
Elmedia Video Player 是Mac毒搜集到的一款 Mac 多媒体播放器. 它可以播放几乎任何音视频文件类型,无论是 AVI,MP4,FLV,SWF, WMV,MKV,MP3,M4V 等 ...

使用vue-video-player实现直播

使用vue-video-player实现直播相关推荐

最新文章

热门文章