m3u8直播流

  1. HLS
  2. M3U8文件概念
  3. M3U8文件举例
  4. videojs
  5. 开发
  6. 跨域问题导致不能播放
  7. 视频流播放会以后卡顿

HLS

HLS(HTTP Live Streaming)是苹果公司针对iPhone、iPod、iTouch和iPad等移动设备而开发的基于HTTP协议的流媒体解决方案。在 HLS 技术中 Web 服务器向客户端提供接近实时的音视频流。但在使用的过程中是使用的标准的 HTTP 协议,所以这时,只要使用 HLS 的技术,就能在普通的 HTTP 的应用上直接提供点播和直播。在App Store中的视频相关的应用,基本都是应用的此种技术。

原理:该技术基本原理是将视频文件或视频流切分成小片(ts)并建立索引文件(m3u8)。浏览器通过m3u8文件的索引地址,播放具体的每个小段视频。

M3U8文件概念

M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

M3U8文件举例

例如使用云图TV点播直播节目时,发送请求:

http://121.199.63.236:7613/m3u8/cckw1/szws.m3u8?from=bab&fun=yes&chk=y&chunk=xax&ppw=yuntutv&auth=yuntutvyuntutvyuntutv&auth=yuntutvyuntutvyuntutv&nwtime=1406515232&sign=033d5483609e6bc87987fc7d2f30a024

返回M3U8文件,文件内容如下

#EXTM3U
#EXT-X-MEDIA-SEQUENCE:140651513
#EXT-X-TARGETDURATION:10
#EXTINF:8,
http://vapp1.fw.live.cntv.cn/cache/289_/seg0/index140651513[140651513].ts
#EXTINF:9,
http://vapp1.fw.live.cntv.cn/cache/289_/seg0/index140651514[140651514].ts
#EXTINF:11,
http://vapp1.fw.live.cntv.cn/cache/289_/seg0/index140651515[140651515].ts

videojs

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库

点击进入官网

点击进入GitHub

开发

拷贝下面的代码,修改直播流地址即可

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Video.js 7.4.1 play hls-m3u8 video</title>
     <link href="https://vjs.zencdn.net/7.8.3/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.8.3/video.js"></script>
    <style>
        body {
        background-color: #191919
        }
        .m {
        width: 960px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        }
    </style>
    </head>
    <body>
    <div class="m">
      <video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
          poster="fengmian.jpg" data-setup="{}">
        <source src="换成你的直播流url.m3u8" type="application/x-mpegURL">
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
      </video>
      <script type="text/javascript">
          //设置中文
          videojs.addLanguage('zh-CN', {
              "Play": "播放",
              "Pause": "暂停",
              "Current Time": "当前时间",
              "Duration": "时长",
              "Remaining Time": "剩余时间",
              "Stream Type": "媒体流类型",
              "LIVE": "直播",
              "Loaded": "加载完毕",
              "Progress": "进度",
              "Fullscreen": "全屏",
              "Non-Fullscreen": "退出全屏",
              "Mute": "静音",
              "Unmute": "取消静音",
              "Playback Rate": "播放速度",
              "Subtitles": "字幕",
              "subtitles off": "关闭字幕",
              "Captions": "内嵌字幕",
              "captions off": "关闭内嵌字幕",
              "Chapters": "节目段落",
              "Close Modal Dialog": "关闭弹窗",
              "Descriptions": "描述",
              "descriptions off": "关闭描述",
              "Audio Track": "音轨",
              "You aborted the media playback": "视频播放被终止",
              "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
              "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
              "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。",
              "No compatible source was found for this media.": "无法找到此视频兼容的源。",
              "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密,无法解密。",
              "Play Video": "播放视频",
              "Close": "关闭",
              "Modal Window": "弹窗",
              "This is a modal window": "这是一个弹窗",
              "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
              ", opens captions settings dialog": ", 开启标题设置弹窗",
              ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
              ", opens descriptions settings dialog": ", 开启描述设置弹窗",
              ", selected": ", 选择",
              "captions settings": "字幕设定",
              "Audio Player": "音频播放器",
              "Video Player": "视频播放器",
              "Replay": "重播",
              "Progress Bar": "进度小节",
              "Volume Level": "音量",
              "subtitles settings": "字幕设定",
              "descriptions settings": "描述设定",
              "Text": "文字",
              "White": "白",
              "Black": "黑",
              "Red": "红",
              "Green": "绿",
              "Blue": "蓝",
              "Yellow": "黄",
              "Magenta": "紫红",
              "Cyan": "青",
              "Background": "背景",
              "Window": "视窗",
              "Transparent": "透明",
              "Semi-Transparent": "半透明",
              "Opaque": "不透明",
              "Font Size": "字体尺寸",
              "Text Edge Style": "字体边缘样式",
              "None": "无",
              "Raised": "浮雕",
              "Depressed": "压低",
              "Uniform": "均匀",
              "Dropshadow": "下阴影",
              "Font Family": "字体库",
              "Proportional Sans-Serif": "比例无细体",
              "Monospace Sans-Serif": "单间隔无细体",
              "Proportional Serif": "比例细体",
              "Monospace Serif": "单间隔细体",
              "Casual": "舒适",
              "Script": "手写体",
              "Small Caps": "小型大写字体",
              "Reset": "重启",
              "restore all settings to the default values": "恢复全部设定至预设值",
              "Done": "完成",
              "Caption Settings Dialog": "字幕设定视窗",
              "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
              "End of dialog window.": "结束对话视窗"
            });

            var myPlayer = videojs('my-video');
            videojs("my-video").ready(function(){
                var myPlayer = this;
                myPlayer.play();
            });

        </script> 
    </div>
</body>
</html>

我参考了CSND这篇

跨域问题导致不能播放

故障:有时使用vedio.js的5.18.4s在处理hls(m3u8格式)视频源时提示:已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’)
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方法:在nginx服务器的中修改nginx.conf文件添加

add_header Access-Control-Allow-Origin *; 

视频流播放会以后卡顿

服务端缓存问题


转载请注明来源。 欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。 可以在下面评论区评论,也可以邮件至 sharlot2050@foxmail.com。

文章标题:m3u8直播流

字数:1.8k

本文作者:夏来风

发布时间:2020-07-04, 23:41:39

原始链接:http://www.demo1024.com/blog/media-m3u8/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。