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


Posted in Javascript onAugust 23, 2019

下载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)

在页面中引入

<video-player
    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', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。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: 'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg', // 你的封面地址
    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地址,从别的博主那看来的地址,亲测可用
     }

至此就可以播放了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
js闭包的用途详解
Nov 09 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
canvas的神奇用法
Feb 03 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 #Javascript
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 #Javascript
通过扫小程序码实现网站登陆功能
Aug 22 #Javascript
vue中实现上传文件给后台实例详解
Aug 22 #Javascript
js的新生代垃圾回收知识点总结
Aug 22 #Javascript
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
农历与西历对照
2006/09/06 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
vue--vuex详解
2019/04/15 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python自定义异常实例详解
2017/07/11 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
小学毕业感言50字
2014/02/16 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
MySQL数据库完全卸载的方法
2022/03/03 MySQL
vue实现登陆页面开发实践
2022/05/30 Vue.js
基于Python实现nc批量转tif格式
2022/08/14 Python