详解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 Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
原生js+css实现tab切换功能
Sep 17 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高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
手机端转换rem适应
2017/04/01 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
Python中list初始化方法示例
2016/09/18 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
python中对数据进行各种排序的方法
2019/07/02 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
小学生作文评语大全
2014/04/21 职场文书
个人考核材料
2014/05/15 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
公务员检讨书
2014/11/01 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
公司仓库管理制度
2015/08/04 职场文书
大学体育课感想
2015/08/10 职场文书
创业计划书之网吧
2019/10/10 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python