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 ...
随机推荐
- photoshop编辑pdf文件
对于PDF文件透明背景的问题 PDF文件背景是透明的,如何使其变成白色 怎样通过photoshop打开多页PDF,编辑后仍保存为多页 注意shift全选,"页面选项"处的'裁剪到' ...
- A.02.01—功能定义—一般定义
二章将属于较轻松的内容,整个过程也会主要以文字描述为主. 最常见的功能定义为按使用操作来定义,如下面的例子是最普通的: 1)用户将雨刮开关打至高速档,雨刮以高速速率刮刷 2)在电源档位为OFF时,用户 ...
- (二分查找 拓展) leetcode 69. Sqrt(x)
Implement int sqrt(int x). Compute and return the square root of x, where x is guaranteed to be a no ...
- MacBook 整个配置过程,供新入手MacBook的同学
这里记录了MacBook 的整个配置过程,可供新入手MacBook和觉得MacBook比较难用的同学参考. 1. 外围拓展 笔记本电脑的特点是携带方便,缺点是屏幕太小,因此你首先需要再申请领用一个外接 ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- CSS margin负值学习及实际应用
前言 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它. 表现 虽然m ...
- 理解 Web 中的Session
===================================Session 工作原理是什么?===================================因为 http 协议是无状态 ...
- Filebeat+ELK部署文档
在日常运维工作中,对于系统和业务日志的处理尤为重要.今天,在这里分享一下自己部署的Filebeat+ELK开源实时日志分析平台的记录过程,有不对的地方还望指出. 简单介绍: 日志主要包括系统日志.应用 ...
- requests中自定义adapter
# encoding:utf-8 import sslfrom requests import sessionsfrom requests import Requestfrom requests.ad ...
- idea+maven+ssm搭建boot_crm项目遇到的问题
使用idea+maven+ssm搭建一个boot_crm项目,遇到的问题如下: 1.环境搭建好了,相关配置文件都配置好了,也部署到了tomcat,但是无法启动首页. 通过百度,google找到了,原因 ...