// 安装依赖
npm i videogular2 --save
npm i hls.js --save // 在index.html中引入
<script src="assets/hls.min.js"></script>
<link href="assets/fonts/videogular.css" rel="stylesheet"> // 在app.modules.ts中引入
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import { VgStreamingModule } from 'videogular2/streaming';
...
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,
VgStreamingModule
],
... // 在html中使用
<vg-player>
<video #myMedia [vgMedia]="media"
[vgHls]="'path-to/v.m3u8'"  // 支持*.mp4类型文件播放
id="my-video"
type="video/mp4"
controls>
</video>
</vg-player>

  

ionic2中使用videogular2实现m3u8文件播放的更多相关文章

  1. vue-video-player集成videojs-contrib-hls实现.m3u8文件播放

    // 安装依赖 npm install vue-video-player --save npm install videojs-contrib-hls --save // 在main.js中全局引入 ...

  2. m3u8文件什么合成便于播放的MP4的方法

    先大家要知道M3U8文件不是一个视频文件,里面全是一些路径,说白了就是一个目录而已,所以要看视频,要找到对应存放视频的文件夹.如果不知道怎么找,可以使用文本格式打开M3U8文件,里面会有路径提示.   ...

  3. m3u8文件简介

    1.   M3U8文件概念 M3U8文件是指UTF-8编码格式的M3U文件.M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播 ...

  4. HLS(HTTP Live Streaming)协议之m3u8文件生成方式

    HLS(HTTP Live Streaming)是Apple的动态码率自适应技术.主要用于PC和Apple终端的音视频服务.包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件. HLS ...

  5. m3u8文件信息总结

    近期在做视频下载.本地播放功能的时候.发现的问题,先笔记记录一下 开发思路 (1) 在线解析m3u8文件内容,把里面的ts相应连接的资源下载本地的Document文件下. (2) 把下载下来的资源使 ...

  6. 关于流媒体(m3u8)的播放与下载

    前一段时间做了一个视频播放下载应用,抓取的是优酷的视频,虽然优酷有自己的开发平台http://open.youku.com/,但未真正的实现.所以只能靠抓取视频源,Youku的视频采取了加密+动态的获 ...

  7. HLS的M3U8文件介绍

    HLS的M3U8文件介绍 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术.主要用于PC和Apple终端的音视频服务. 相较于实时传输协议(RTP),HLS可以穿过任 ...

  8. 关于大视频video播放的问题以及解决方案(m3u8的播放)

    在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...

  9. m3u8文件合并处理

    m3u8文件合并处理 简介 M3U8 是 Unicode 版本的 M3U,用 UTF-8 编码."M3U" 和 "M3U8" 文件都是苹果公司使用的 HTTP ...

随机推荐

  1. iOS 利用高德地图WMS服务

    Demo:  https://github.com/xushiyou23/AMapTesting 转: 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net ...

  2. 【dfs】P1433 吃奶酪

    题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...

  3. 题解 AT2390 【Games on DAG】

    题目大意 给出一个n个点m条边的DAG,记为G. 可以删掉若干条边成为G′,显然有 2m 种不同的G′. 连边保证:若有 (xi →yi​) 边,则 xi​ < yi . 初始点1和点2有一个标 ...

  4. css实现弹出框

    弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的.其实就是用到了css里面的一个:target选择器+visibility属性. U ...

  5. Entity Framework入门教程(1)---Entity Framework简介

    什么是Entity Framework 学习EF的前提:熟练使用Linq和Ado.net,因为在使用EF框架进行开发时,我们大多数情况使用Linq进行查询和操作,而EF的底层实现用的是Ado.net. ...

  6. Entity Framework入门教程(8)---预先加载、延迟加载、显示加载

    1.预先加载 预先加载:在对一种类型的实体进行查询时,将相关的实体作为查询的一部分一起加载.预先加载可以使用Include()方法实现. 1.加载一个相关实体类型 栗子:使用Include()方法从数 ...

  7. ACM-ICPC 2018 徐州赛区网络预赛 G Trace(思维+set)

    https://nanti.jisuanke.com/t/31459 题意 n个矩阵,不存在包含,矩阵左下角都在(0,0),给右上角坐标,后来的矩阵会覆盖前面的矩阵,求矩阵周长. 分析 set按照x或 ...

  8. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  9. luogu 4345 Lucas的变形应用

    求 sigma i由0-k C(n,i) 利用Lucas定理+整除分块将C(n/p,i/p)利用i/p分块,得到k/p-1个整块(p-1)和一个小块(k%p) 最后得到式子 F(n,k)=F(n/p, ...

  10. RT-SA-2019-007 Code Execution via Insecure Shell Functiongetopt_simple

    Advisory: Code Execution via Insecure Shell Function getopt_simple RedTeam Pentesting discovered tha ...