详解vue-video-player使用心得(兼容m3u8)

发布时间：2020-10-07 00:09:06

来源：脚本之家

阅读：112

下载vue-video-player

npm install vue-video-player --save

在main.js文件引入

import VideoPlayer from 'vue-video-player'

require('video.js/dist/video-js.css')

require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

在页面中引入

ref="videoPlayer"

class="video-player vjs-custom-skin"

:playsinline="true"

:options="playerOptions"

@play="onPlayerPlay($event)"//监听开始状态

@pause="onPlayerPause($event)"//监听暂停状态

/>

在页面中data中配置

playerOptions: {

// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

autoplay: false, // 如果true,浏览器准备好时开始回放。

muted: false, // 默认情况下将会消除任何音频。

loop: false, // 导致视频一结束就重新开始。

preload: 'auto', // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)

language: 'zh-CN',

aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")

fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

sources: [

{

type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目

src: 'https://CDN.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm' // url地址

}

],

hls: true,

poster: 'https://cache.yisu.com/upload/information/20200622/114/16031.gif', // 你的封面地址

width: document.documentElement.clientWidth, // 播放器宽度

notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

controlBar: {

timeDivider: true,

durationDisplay: true,

remainingTimeDisplay: false,

fullscreenToggle: true // 全屏按钮

}

},

挂载视频组件(非必须)不写这一步也可以实现播放，添加这个是为了自定义按钮使用

computed: {

player() {

return this.$refs.videoPlayer.player//自定义播放

}

},

官方文档

video.js:https://docs.videojs.com/docs/api/player.html

vue-video-player:https://github.com/surmon-china/vue-video-player

不需要兼容m3u8的，以上就可以实现能播放

兼容m3u8的需要下载

npm install --save videojs-contrib-hls

在文件中引入

import ‘videojs-contrib-hls'

我这么引入会出现找不到文件，我没找到问题所在，如果这么引入不行，可以改为

在main.js文件中

const hls = require('videojs-contrib-hls')

Vue.use(hls)

这样就好了

在页面中测试

{

type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目

src:

'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8' // url地址，从别的博主那看来的地址，亲测可用

}

至此就可以播放了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。