详解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 相关文章推荐
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
javascript求日期差的方法
2016/03/02 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
SQL Server面试题
2016/10/17 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
小班秋游活动方案
2014/02/22 职场文书
小学生家长寄语
2014/04/02 职场文书
初一学生评语大全
2014/04/24 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python