Vue中如何插入m3u8格式视频,3分钟学会!
大家都知道video只支持ogg、webm、MP4格式,但是要是m3u8格式的视频怎么办?最近遇到这个问题在网上找了好多办法都不行,最后找到video.js后才完美解决,所以决定写一篇文章,跟大家分享一下;
1、在Vue中引入m3u8格式视频需要引入video.js和video-contrib-bls;
npm install --save video.js
npm install --save videojs-contrib-hls
2、在main.js文件中引入css,设置视频的样式;
// main.js中引入css
import 'video.js/dist/video-js.css'
3、在使用的.Vue文件中,引入video.js和video-contrib-bls;只需要在使用的地方引入,不使用的地方就不需要引入了;
import videojs from 'video.js'
import 'videojs-contrib-hls'
4、引入播放器,需要动态设置视频的小伙伴可以把src设置成动态修改,这样就可以随便播放自己喜欢的视频了;
<template>
<div>
<video
id="my-video"
class="video-js vjs-default-skin box"
controls
preload="auto"
>
<source
src="https://videos8.jsyunbf.com/20190717/s6DaVnKb/index.m3u8"
type="application/x-mpegURL"
/>
</video>
</div>
</template>
5、设置播放;
export default {
mounted() {
videojs("my-video",
function() {
this.play();
});
}
};
6、最后在style文件中给视频设置一个宽高,插入到video中的class中空格添加;如果不设置的话会变成全屏显示;
<style scoped>
.box {
width: 400px;
height: 300px;
border: 20px solid;
}
</style>
啦啦啦,最后视频就可以正常播放了!如果这篇文章帮助到了您的话,帮忙转发下哦!谢谢了!
如果觉得不错请点点手指,关注下我们公众号,我们会长期为您分享前端知识点;
Vue中如何插入m3u8格式视频,3分钟学会!的更多相关文章
- Python 爬虫实例(13) 下载 m3u8 格式视频
Python requests 下载 m3u8 格式 视频 最近爬取一个视频网站,遇到 m3u8 格式的视频需要下载. 抓包分析,视频文件是多个 ts 文件,什么是 ts文件,请去百度 ...
- 前端播放m3u8格式视频
一.前端播放m3u8格式视频 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...
- 在vue项目中播放m3u8格式视频
前言:最近公司在做一个线上会议的项目,要求后台网站播放m3u8格式的视频,查找部分资料,总结一下,方便后边查阅 1.在vue工程中安装以下依赖: cnpm install video.js --sa ...
- vue 使用vue-video-player播放hls格式视频
安装 vue-video-player 在 “ devDependencies ” 中 安装 videojs-contrib-hls 在“ dependencies ”中 main.js 中 ...
- 关于vue中的videoPlayer的src视频地址参数动态修改(网上一堆错误方法,被误导很久,自己找到了正确的方法,供大家借鉴)
方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单.this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用绿色框起来 ...
- html页面引用video.js播放m3u8格式视频
//head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...
- JS和vue中日期格式的转换
1.获取当前时间: var now=new Date(); //Tue Oct 17 2017 18:08:40 GMT+0800 (中国标准时间) 获取当前时间的日期 new Date().getD ...
- vue中通过hls.js播放m3u8格式的视频
近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放 一.m3u8和HLS介绍 1.M3U8文件是指UTF-8编码格式的 ...
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
随机推荐
- shell脚本--监控java进程存活脚本
#!/bin/bash base_dir=/opt war_processor="tomcat" jar_processor="manager-server.jar pl ...
- GNU项目
目标在于建立一个完全相容于UNIX的自由软件环境.发展GNU系统的计划,最早由理查德•斯托曼在1983 年启动,它是自由软件基金会最早致力的目标.最近一个GNU系统版本,是于2011年4月1日释出的G ...
- wpf prism IRegionManager 和IRegionViewRegistry
引入了一个新的问题,IRegionViewRegistry和IRegionManager都具有RegisterViewWithRegion方法,二者有区别么? 答案是——没有.我们已经分析过,在Uni ...
- linux之文件目录,输入及输出
文件目录结构 ls 查看文件 ll 查看详细文件 文件和目录被组织成一颗倒置的树状结构 文件系统从根开始,'/' 文件名严格区分大小写 隐藏文件以.开头 文件的分隔符为'/' 文件命名规范 文件字符最 ...
- Java 操作Word表格
本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...
- vue-cli 3.x 构建项目,webpack没有了?
vue-cli 3.x 已经没有了webpack.config.js文件.取而代之的是创建一个vue.config.js文件.官网是这样介绍的 vue.config.js const path = r ...
- ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
- Oracle三种排名函数使用
1) SELECT s.*,Row_Number() OVER (partition by c_name ORDER BY grade desc) rank FROM score s 2) SELEC ...
- 【VS开发】关于SEH的简单总结
尽管以前写过一篇SEH相关的文章<关于SEH的简单总结>, 但那真的只是皮毛,一直对Windows异常处理的原理似懂非懂, 看了下面的文章 ,一切都豁然开朗. 1997年文章,Windo ...
- Markdown用法说明(用此篇博客做示例)
一份好的博客文档离不开一个优秀的编辑器.借此篇文章介绍一下编写该博客markdown的语法,后续再增加介绍其他语法,方便大家写出更好更漂亮的文档.点击左上角github,有主题源码哦 一份好的博客文档 ...