流媒体服务器： 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. TPA测试项目管理系统-测试用例管理

            Test Project Administrator(简称TPA)是经纬恒润自主研发的一款专业的测试项目管理工具,目前已广泛的应用于国内二十余个整车厂和零部件供应商.它可以管理测试过程 ...

  2. Luogu P2280/ACAG 0x03-1 激光炸弹

    Luogu P2280/ACAG 0x03-1 激光炸弹 这道题要用到二维前缀和. 首先读入时,令$a[x][y]=val$: 然后不难递推出$s[i][j]=s[x-1][y]+s[i][j-1]- ...

  3. <? extends T> 及 <? super T> 重温

    <? extends T> 及<? super T> 重温 本文针对泛型中<? extends T> 及<? super T>的主要区别及使用用途进行讨 ...

  4. pycharm下site-packages文件标记为红的问题；pycharm无法识别本地site-packages问题

    当图示红框标记区域的文件夹颜色显示红色时,需要到FIle-setting里面设置好本地的运行环境,设置错误就会导致引用问题: 启动谷歌浏览器 from selenium import webdrive ...

  5. 微信小程序~上拉加载onReachBottom

    代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ tit ...

  6. 使用Apache commons-maths3-3.6.1.jar包进行简单的数据统计分析（java）

    使用maths3函数进行简单的数据统计性描述: 使用场景:本地,直接运行就可以: 具体后面有个性化的需求,可以再修改~ package com; import org.apache.commons.l ...

  7. nginx和tomcat配置负载均衡和session同步

    一.背景 因业务需求,现需配置多台服务器,实现负载均衡. 二.解决方案 使用 nginx + tomcat,在这一台应用服务器部署一个nginx和两个tomcat.通过nginx修改配置后reload ...

  8. 【深入ASP.NET原理系列】--Asp.Net Mvc和Asp.Net WebForm实际上共用一套ASP.NET请求管道

    .NET FrameWork4在系统全局配置文件(如在如下目录中C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config) 中添加了一个名字叫Url ...

  9. cjss 像编写css 一样开发web应用

    cjss 提供了使用类似css 的方式编写web 应用 cjss 包含的阶段 data prepare body element 几点说明 并不是所以阶段必须使用,但是每个级别只能存在一个script ...

  10. Log4net 单独创建配置文件（三）

    1.建立ASP.Net空的Web程序,添加Default.aspx窗体 2.添加web配置文件命名为:log4net.config,添加配置 <?xml version="1.0&qu ...