在vue项目中播放m3u8格式视频
前言:最近公司在做一个线上会议的项目,要求后台网站播放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格式视频的更多相关文章
- 前端播放m3u8格式视频
一.前端播放m3u8格式视频 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...
- vue 使用vue-video-player播放hls格式视频
安装 vue-video-player 在 “ devDependencies ” 中 安装 videojs-contrib-hls 在“ dependencies ”中 main.js 中 ...
- html页面引用video.js播放m3u8格式视频
//head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...
- Vue中如何插入m3u8格式视频,3分钟学会!
大家都知道video只支持ogg.webm.MP4格式,但是要是m3u8格式的视频怎么办?最近遇到这个问题在网上找了好多办法都不行,最后找到video.js后才完美解决,所以决定写一 ...
- Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验
安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- opencv实例三:播放AVI格式视频
一.不带滚动条的视频读取播放. 1.原理介绍:视频的本质是一些静态的图像的集合,opencv可以不断读取视屏中的图片,显示,就可以实时的视频流进行处理了. 2.代码如下: /************* ...
- vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
随机推荐
- 进阶之路 | 奇妙的Activity之旅
前言 本文已经收录到我的Github个人博客,欢迎大佬们光临寒舍: 我的GIthub博客 本篇文章需要已经具备的知识: Activity的基本概念 AndroidManifest.xml的基本概念 学 ...
- java开发规范学习
from 慕课网-明明如月-<阿里巴巴的Java开发手册> Integer缓存问题分析 1, Integer缓存[-128, 127]的数字,除此之外,将通过new创建. Long也是缓存 ...
- redis_入门
Redis_day01 1. NoSql 1.1 NoSql是什么 NoSQL(不仅仅是SQL not only SQL),泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在处 ...
- C#设计模式学习笔记:(17)中介者模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7966240.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第五个模式--中 ...
- Python——20200220Python123冲刺试卷 - 1
知识点:面向对象继承,数组组织,文件操作,数据类型 1.面向对象的继承:继承是指类之间共享属性和操作的性质 2.软件危机的原因不包括:软件成本不断提高 软件危机原因: 软件开发生产率低.软件过程不规范 ...
- 测试.NET core MiddleWare 运行逻辑
话不多说,直接开整. 首先创建一个.NET CORE web 工程,创建完成之后,会自动创建相关文件如图(本示例基于.NET CORE 3.0): 打开Startup.cs可以看到在Configure ...
- U盘装系统/win to go制作笔记
//添加图片太麻烦了吧,我扔相册里了,需要自取吧. //U盘装系统 环境:win10戴尔灵越台式机 硬件:16G U盘,Windows电脑 软件:老毛桃启动装机工具,win10镜像1803版本 进入网 ...
- SpringBoot整合NoSql--(三)Redis集群
(1)集群原理 在Redis集群中,所有的Redis节点彼此互联,节点内部使用二进制协议优化传输速度和带宽. 当一个节点挂掉后,集群中超过半数的节点检测失效时才认为该节点已失效.不同于Tomcat集群 ...
- centos7 字体库。vim乱码
centos7 字体库.vim乱码 windows上传文件到centos,需要先使用dos2unix命令进行格式转换 先查看/usr/share下有没有这两个文件 没有的话yum -y install ...
- Badusb 简易制作
Badusb easy_make 0x00 basic knowledge and equip arduino IDE download address: https://www.arduino.cc ...