详解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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
js模拟弹出效果代码修正版
Aug 07 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
jsonp原理及使用
Oct 28 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
js实现日期级联效果
Jan 23 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 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判断是否连接上网络的方法
2015/07/01 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python对文件操作知识汇总
2016/05/15 Python
python实现人脸识别代码
2017/11/08 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
教师档案管理制度
2014/01/23 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
幼儿生日活动方案
2014/08/27 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
个人委托函范文
2015/01/29 职场文书
思想道德自我评价2015
2015/03/09 职场文书
欠款证明
2015/06/24 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2016年元旦致辞
2015/08/01 职场文书
爱国主题班会教案
2015/08/14 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js