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 ...
随机推荐
- 【C/C++】任意进制转换
进制转换:R进制->10进制:10进制->R进制. #include<bits/stdc++.h> using namespace std; /*函数:r进制转换成10进制*/ ...
- java9最新发布
链接:http://pan.baidu.com/s/1slbRFa9 密码:hcdj 给大家分享可以去下载 已接受的特性 1. Jigsaw 项目:模块化JDK源码 Jigsaw项目即JEP201是为 ...
- pc安装完成charles成功,小米安装crt证书失败
问题描述: 今天在学习爬虫爬取APP内容时,需要安装crt证书.根据静谧大大的书,前面都挺顺利的.但在我的小米手机上安装crt证书时,出现了错误.手机显示无法安装. 解决之道: 1.不要用小米手机自带 ...
- 测试框架httpclent 4.HttpClient Post方法实现
startupWithCookies.json [ { "description":"这是一个会返回cookies信息的get请求", "reques ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Docker:手动制作镜像 [五]
一.制作docker镜像的步骤 1.启动容器安装软件服务 2.将安装好服务的容器commit提交为镜像 3:.启动新容器来测试新提交的镜像 二.制作支持ssh远程登录的docker镜像 1.启动容器安 ...
- HTML/CSS: 如何制作未读信息图标
最近公司项目中涉及到制作通讯界面中未读信息的带数字的红色圆点图标. 拿我目前的博客头像图片为例(其实就是谷歌图片中粗略挑了一张顺眼的图片),效果图如下: HTML代码如下: <img id=&q ...
- SpringBoot入门-2(两种热部署方式)
在编写代码的时候,你会发现我们只是简单把打印信息改变了,就需要重新部署,如果是这样的编码方式,那么我们估计一天下来就真的是打几个Hello World就下班了.那么如何解决热部署的问题呢?那就是spr ...
- 用 python 写一个年会抽奖小程序
使用 pyinstaller 打包工具常用参数指南 pyinstaller -F demo.py 参数 含义 -F 指定打包后只生成一个exe格式的文件 -D –onedir 创建一个目录,包含exe ...
- mvc 返回一个对象 到视图接收
public ActionResult InfoFrame() { List<Users> list = new List<Users>(); Users user = new ...