流媒体服务器： wowza

流媒体格式： m3u8

播放端：移动端网页（Android、IOS）

播放工具： video.js

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>videojs-contrib-hls embed</title>

  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">

  <script src="https://unpkg.com/video.js/dist/video.js"></script>

  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

</head>

<body>

  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="100%" height="auto"

  data-setup='{}'>

    <source src="http://live.xxx.cn:1935/live/8C23D96A479B9C4BE055000000000107-EXT/playlist.m3u8" type="application/x-mpegURL">

  </video>

  <script>

  </script>

</body>

</html>

移动端播放直播流（video.js 播放 m3u8 流）的更多相关文章

  1. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  2. 视频播放效果--video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  3. video.js支持m3u8格式直播

    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...

  4. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...

  5. video.js播放rtmp

    项目中要用到rtmp直播和点播.要求:点播能够调整播放进度 开始用腾讯提供的播放器,老卡,画质差,很多时候播不出来,rtmp点播还不能快进. 后来用Wowza自带的flash rtmp播放器,有源码 ...

  6. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  7. 流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...

  8. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  9. 【vue】使用 Video.js 播放视频

    目录 安装 引入 使用 参考文档 环境: vue 2.0+ element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式) 安装 在项目中安装 video.js. ...

随机推荐

  1. OpenStack核心组件-glance镜像服务

    1. glance介绍 Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚拟机镜像的metadata ...

  2. 流Stream的关闭

    文章;MemoryStream.Close() or MemoryStream.Dispose() Close() and Dispose(), when called on a MemoryStre ...

  3. AbsInt — 确保代码安全的性能/资源分析工具套件

            德国AbsInt公司是一家安全苛求软件研发.确认.验证和认证工具链的供应商,能够为客户提供完整的确保代码安全的性能分析工具套件以及软件分析.验证.确认和编译器技术相关咨询服务.AbsI ...

  4. 使用Xpath爬虫库下载诗词名句网的史书典籍类所有文章。

    # 需要的库 from lxml import etree import requests # 请求头 headers = { 'User-Agent': 'Mozilla/5.0 (Windows ...

  5. MySQL：查询、修改（二）

    干货: 使用SELECT查询的基本语句SELECT * FROM <表名>可以查询一个表的所有行和所有列的数据.SELECT查询的结果是一个二维表. 使用SELECT *表示查询表的所有列 ...

  6. pyinstaller打包多个py文件和去除cmd黑框

    1.打包多个py文件并且去除cmd黑框 格式:pyinstaller.exe -F 路径\文件名.py空格路径\文件名.py空格--noconsole pyinstaller.exe -F ui.py ...

  7. gitlab修改ip

    gitlab 修改ip的两种方式: 修改/etc/gitlab/gitlab.rd 里面的#external_url 'http://gitlab.example.com' 为ip地址,然后重新构建- ...

  8. Cramer-Rao Bounds (CRB)

    克拉美-罗界.又称Cramer-Rao lower bounds(CRLB),克拉美-罗下界. 克拉美罗界是对于参数估计问题提出的,为任何无偏估计量的方差确定了一个下限.无偏估计量的方差只能无限制的逼 ...

  9. 用户画像（User Profile）

    什么是用户画像? 用户画像是根据某个具体的用户的人口学特征.网络浏览内容.网络社交活动和消费行为等信息而抽象出的一个标签化的用户模型.例如某用户的画像是:男,31岁,已婚,收入1万以上,爱美食,团购达 ...

  10. 【JZOJ6229】【20190621】san

    题目 \(n\)个点\(m\)条边的有向图,每个点有点权 你可以选择拓扑序的一个区间的 最大化点权和 $n \le 50  , m \le \frac{n*(n-1)}{2} , 0 \le |a_i ...