流媒体服务器： 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. spring的@Scheduled定时任务，同一时间段的定时任务只会执行一个，其余的会被阻塞,@Scheduled注解定时任务并发执行解决办法，即多线程运行定时任务

    原文:https://blog.csdn.net/qq_35937303/article/details/88851064 现有两个定时任务 @Component("aa") pu ...

  2. Codeforces C. Split a Number（贪心大数运算）

    题目描述: time limit per test 2 seconds memory limit per test 512 megabytes input standard input output ...

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

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

  4. VS2005编译QT4.8.2

    为什么要编译? 因为安装安装版的QT4.8.2,vs2005编译报错. 1.下载QT4.8.2,qt-everywhere-opensource-src-4.8.2.zip,下载vs-AddIn1.1 ...

  5. destoon下动态链接301到伪静态（ngnix）

    分享一个destoon6.0/7.0下动态链接301到伪静态上面,实现权重提升. if ($request_uri ~* "^/index.php\?itemid=(\d+)&mod ...

  6. c++中关联容器map的使用

    C++关联容器<map>简单总结(转) 补充: 使用count,返回的是被查找元素的个数.如果有,返回1:否则,返回0.注意,map中不存在相同元素,所以返回值只能是1或0. 使用find ...

  7. git log filter(六)

    显示前10条提交记录: root@vmuer-VirtualBox:/media/vmuer/share/cmake-uart-server# git log -10 commit b056dacb0 ...

  8. 开源项目 07 AutoMapper

    using AutoMapper; using Newtonsoft.Json; using System; using System.Collections.Generic; using Syste ...

  9. Mysql 随机查询10条数据效率最快的查询方法

    1)使用join 和 rand() 耗时 0.009 SELECT * FROM `t_topic` AS t1 JOIN ( SELECT ROUND( RAND() * ( (SELECT MAX ...

  10. BootstrapTable 表格插件

    BootStrap Table 下载:https://v3.bootcss.com/getting-started/ BootStrap Table Css:https://v3.bootcss.co ...