// 安装依赖
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. Bugku 分析 中国菜刀

    解压之后得到了一个流量包,只有不到10KB,美滋滋 先抓重点,过滤出http,只有6条数据记录,3条post,3条response,3条post都是一样的 随便打开一条pos 是一个assert断言, ...

  2. mpvue——小程序修改input的placehold样式

    前言 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/input.html 用placeholder-class的时候没 ...

  3. Magento2 API 服务合同设计模式 依赖注入 介绍

    公共接口和API 什么是公共界面? 一个公共接口是一组代码,第三方开发者可以调用,实现或构建一个 插件 .Magento保证在没有重大版本更改的情况下,此代码在后续版本中不会更改. 模块的公共接口 标 ...

  4. pillow的用法

    这是原图 from PIL import Image im=Image.open('C:/Users/history/Desktop/微信图片_20190408110611.jpg') r,g,b=i ...

  5. 11.11CTF答案

    签到题                             flag{0ca175b9c0f726a831d895e269332461 } 下载WIN HEX,用WIN HEX打开“海贼王图片”, ...

  6. python中的__metaclass__

    什么是元类: python中类也是一种对象, 可以称为类对象. 元类就是用来创建类对象的"东西". 你创建类就是为了创建类的实例对象, 不是吗? 但是我们已经学习了python中的 ...

  7. Git以及TortoiseGit的下载安装使用

    Git以及TortoiseGit的下载安装使用 下载git 下载地址:https://git-scm.com/然后进行一系列的安装,傻瓜式的操作即可 TortoiseGit Tortoise 英[ˈt ...

  8. C# mvc 前端调用 redis 缓存的信息

    新手 这几天网上学习下redis ,自己总结下过程,怕之后忘记了,基本会用最简单的,有的还是不懂,先记下来,自己摸索的. 没有安装redis的先安装,教程:http://www.cnblogs.com ...

  9. Lua中的迭代器与泛型for

    [前言] 迭代器就是一种可以遍历一种集合中所有元素的机制,在Lua中,通常将迭代器表示为函数.每调用一次函数,就返回集合中的“下一个”元素.每个迭代器都需要在每次成功调用之后保存一些状态,这样才能知道 ...

  10. Alpha 冲刺 (9/10)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之9 团队部分 后敬甲(组长) 过去两天完成了哪些任务 答辩准备中 和大佬们跟进进度 接下来的计划 准备答辩 ...