前言:最近公司在做一个线上会议的项目,要求后台网站播放m3u8格式的视频,查找部分资料,总结一下,方便后边查阅

1.在vue工程中安装以下依赖:

cnpm install  video.js --save
 cnpm install videojs-contrib-hls --save
//我使用的是淘宝镜像源,下载会快一点,没有用npm

2.在需要播放的页面引入

import videojs from 'video.js'
import 'videojs-contrib-hls'

3.准备一个容器,我这里是视频列表

<div v-for="(item,index) in this.videolist.pageData" :key="index">
<div class="videoitem"> //因为id唯一,在遍历的时候给id加上下标,便于区分; poster是封面图 <video :id="'my-video'+index" class="video-js vjs-default-skin imgs"
controls preload="auto" poster="../../images/huiyi.jpg">
<source :src="item.url" type="application/x-mpegURL">
</video> <div class="video_text">
<h1 class="video_h1">标题 : <span>{{item.title}}</span></h1>
<p class="video_p">创建时间:<span>{{item.createDate}}</span></p>
</div>
</div>
</div>

3.在mounted中获取到初始化的视频地址列表(在这里我做了一个粗暴的操作)

  mounted() {

     setTimeout(_ => {
let lang=this.videolist.pageData.length //视频长度
for(let i=0;i<lang;i++){ //id+i是为了id的唯一性 videojs("my-video"+i, { //播放的事件
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
hls: {
withCredentials: true
}
}, function () {
// this.play() //取消自动播放
})
} }, 1000);
},

4.最后效果图

小结:记录前端踩坑的日子

  

  

  

在vue项目中播放m3u8格式视频的更多相关文章

  1. 前端播放m3u8格式视频

    一.前端播放m3u8格式视频 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...

  2. vue 使用vue-video-player播放hls格式视频

    安装 vue-video-player   在 “ devDependencies ” 中 安装  videojs-contrib-hls 在“ dependencies ”中   main.js 中 ...

  3. html页面引用video.js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

  4. Vue中如何插入m3u8格式视频,3分钟学会!

    ​        大家都知道video只支持ogg.webm.MP4格式,但是要是m3u8格式的视频怎么办?最近遇到这个问题在网上找了好多办法都不行,最后找到video.js后才完美解决,所以决定写一 ...

  5. Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验

    安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...

  6. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  7. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  8. opencv实例三:播放AVI格式视频

    一.不带滚动条的视频读取播放. 1.原理介绍:视频的本质是一些静态的图像的集合,opencv可以不断读取视屏中的图片,显示,就可以实时的视频流进行处理了. 2.代码如下: /************* ...

  9. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

随机推荐

  1. C语言switch中case后跟随break语句

    1.case后面的常量表达式实际上只起语句标号作用,而不起条件判断作用,即“只是开始执行处的入口标号”.因此,一旦与switch后面圆括号中表达式的值匹配,就从此标号处开始执行:而且执行完一个case ...

  2. c语言标准I/O

    头文件 <stdio.h> 打开/关闭文件 FILE *fopen(char *filename, char *mode); 如果正常打开返回FILE指针,否则返回NULL mode常用值 ...

  3. MySQL常用关键词

    MySQL常用关键词 1.  显示表departments的结构:DESC DESC departments; 2. 显示出表employees中的全部job_id(不能重复):DISTINCT SE ...

  4. JavaScript——基础知识,开始我们的js编程之旅吧!

    JavaScript基础第01天 1. 编程语言 编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...

  5. opencv —— moments 矩的计算(空间矩/几何矩、中心距、归一化中心距、Hu矩)

    计算矩的目的 从一幅图像计算出来的矩集,不仅可以描述图像形状的全局特征,而且可以提供大量关于该图像不同的几何特征信息,如大小,位置.方向和形状等.这种描述能力广泛应用于各种图像处理.计算机视觉和机器人 ...

  6. Linux服务器被入侵后的处理过程(转发阿良)

    Linux服务器被入侵后的处理过程   突然,频繁收到一组服务器 ping 监控不可达邮件,赶紧登陆 zabbix 监控系统查看流量状况. 可见流量已经达到了 800M 左右,这肯定不正常了,马上尝试 ...

  7. js删除对象数组

    若用remove删除某个对象数组,使用for循环遍历数组中的每个对象进行删除,则必须从数组的最后一个元素倒序删除,否则每次删除都只能删除数组的一半元素,因为把索引为0的子节点删除后那么很自然的原来索引 ...

  8. 微服务SpringCloud(一)

    Spring Cloud微服务(一) 什么是Spring Cloud 简单来说,Spring Cloud是一个微服务框架的规范,注意,只是规范,他不是任何具体的框架.Spring Cloud 为最常见 ...

  9. Lua实现的八皇后问题

    来自<Lua程序与设计>第二节- 八皇后问题 输出所有解的解法 书中提供的源代码,加注了自己的注释. N = 8 --[[ N为棋盘规模 a为一维数组,保存第i个皇后所在的列数 ]] -- ...

  10. Dev-C++如何创建源代码模板?

    Dev-C++如何创建源代码模板? 预览图片 按下Ctrl+N或者点击新建源代码,就会自动出现这些代码了 以下是操作步骤 编写你的模板 这里有我的样例: #include<iostream> ...