ionic2中使用videogular2实现m3u8文件播放
// 安装依赖
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文件播放的更多相关文章
- vue-video-player集成videojs-contrib-hls实现.m3u8文件播放
// 安装依赖 npm install vue-video-player --save npm install videojs-contrib-hls --save // 在main.js中全局引入 ...
- m3u8文件什么合成便于播放的MP4的方法
先大家要知道M3U8文件不是一个视频文件,里面全是一些路径,说白了就是一个目录而已,所以要看视频,要找到对应存放视频的文件夹.如果不知道怎么找,可以使用文本格式打开M3U8文件,里面会有路径提示. ...
- m3u8文件简介
1. M3U8文件概念 M3U8文件是指UTF-8编码格式的M3U文件.M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播 ...
- HLS(HTTP Live Streaming)协议之m3u8文件生成方式
HLS(HTTP Live Streaming)是Apple的动态码率自适应技术.主要用于PC和Apple终端的音视频服务.包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件. HLS ...
- m3u8文件信息总结
近期在做视频下载.本地播放功能的时候.发现的问题,先笔记记录一下 开发思路 (1) 在线解析m3u8文件内容,把里面的ts相应连接的资源下载本地的Document文件下. (2) 把下载下来的资源使 ...
- 关于流媒体(m3u8)的播放与下载
前一段时间做了一个视频播放下载应用,抓取的是优酷的视频,虽然优酷有自己的开发平台http://open.youku.com/,但未真正的实现.所以只能靠抓取视频源,Youku的视频采取了加密+动态的获 ...
- HLS的M3U8文件介绍
HLS的M3U8文件介绍 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术.主要用于PC和Apple终端的音视频服务. 相较于实时传输协议(RTP),HLS可以穿过任 ...
- 关于大视频video播放的问题以及解决方案(m3u8的播放)
在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...
- m3u8文件合并处理
m3u8文件合并处理 简介 M3U8 是 Unicode 版本的 M3U,用 UTF-8 编码."M3U" 和 "M3U8" 文件都是苹果公司使用的 HTTP ...
随机推荐
- 【XSY2887】【GDOI2018】小学生图论题 分治FFT 多项式exp
题目描述 在一个 \(n\) 个点的有向图中,编号从 \(1\) 到 \(n\),任意两个点之间都有且仅有一条有向边.现在已知一些单向的简单路径(路径上任意两点各不相同),例如 \(2\to 4\to ...
- CF209C Trails and Glades
题目链接 题意 有一个\(n\)个点\(m\)条边的无向图(可能有重边和自环)(不一定联通).问最少添加多少条边,使得可以从\(1\)号点出发,沿着每条边走一遍之后回到\(1\)号点. 思路 其实就是 ...
- TensorFlow深度学习,一篇文章就够了
http://blog.jobbole.com/105602/ 作者: 陈迪豪,就职小米科技,深度学习工程师,TensorFlow代码提交者. TensorFlow深度学习框架 Google不仅是大数 ...
- Mybatis的应用2 使用mybits+SpringBoot完成第一个查询的demo(随后加增加,更新,删除)
首先在mapper下面新建一个mysql.xml mysql.xml <?xml version="1.0" encoding="UTF-8" ?> ...
- JavaLinkedHashSet练习
题目三: 1.键盘录入一个字符串,去掉其中重复字符 2.打印出不同的那些字符,必须保证顺序.例如输入:aaaabbbcccddd,打印结果为:abcd.尝试用两种方法解决字符串删除问题,一是使用Has ...
- PageRank算法--从原理到实现
本文将介绍PageRank算法的相关内容,具体如下: 1.算法来源 2.算法原理 3.算法证明 4.PR值计算方法 4.1 幂迭代法 4.2 特征值法 4.3 代数法 5.算法实现 5.1 基于迭代法 ...
- javascript节点移除
var itemdel = document.getElementById("test"); itemdel.removeChild(lis[0]); 兼容性较好 itemdel. ...
- MyBatis # $区别
方式一: <select id="getUserById" resultType="User" parameterType=”int”> SELEC ...
- sqlmap基础入门超详细教程
前言: 总算进入了自己喜欢的行业. 要时刻记得当初自己说过的话, 不忘初心. Come on! 资料: 感谢超哥分享的干货.. sqlmap干货点击直达 学习环境: 本次学习使用的是kali集成的s ...
- python之造测试数据-faker(转载)
在软件需求.开发.测试过程中,有时候需要使用一些测试数据,针对这种情况,我们一般要么使用已有的系统数据,要么需要手动制造一些数据. 在手动制造数据的过程中,可能需要花费大量精力和工作量,现在好了,有一 ...