直播流技术大杂烩

栏目: 服务器 · 发布时间: 5年前

内容简介:RTMP(Real-Time Messaging Protocol),实时消息协议,Macromedia公司开发,后Macromedia被Adobe收购。RTMP被设计用来在Flash插件中使用,因此如果用在浏览器端,必须安装Flash插件其他端也可使用相关解码器解码RTMP流

RTMP(Real-Time Messaging Protocol),实时消息协议,Macromedia公司开发,后Macromedia被Adobe收购。

RTMP被设计用来在Flash插件中使用,因此如果用在浏览器端,必须安装Flash插件

其他端也可使用相关解码器解码RTMP流

RTMP实时性较强,一般在3秒左右

HLS(HTTP Live Streaming),是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。

HLS只请求HTTP报文,因此可以在浏览器端不依赖任何插件直接使用

HLS实时性较差,一般在10秒左右

HLS使用示例

Web端

Web端可以使用 videojsvideojs-http-streaming 播放HLS直播流

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HLS Sample</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@7.3.0/dist/video-js.min.css">
    <script src="https://cdn.jsdelivr.net/npm/video.js@7.3.0/dist/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@videojs/http-streaming@1.5.0/dist/videojs-http-streaming.js"></script>
</head>
<body>
<video-js id="video" width="600" height="400" class="vjs-default-skin" controls>
    <source src="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8"
            type="application/x-mpegURL">
</video-js>
<script>
    videojs('video').play();
</script>
</body>
</html>

其他公开视频流:

  • https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8

RTMP使用示例

Web端

Web端可以使用 videojsvideojs-flashFlash 插件播放RTMP直播流

示例代码

理论上以下代码可以工作,然而实际上播放不了视频。官方没有完整的使用示例,栈爆网搜到的代码也播放不了。。。//TODO

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@7.3.0/dist/video-js.min.css">
    <script src="https://cdn.jsdelivr.net/npm/video.js@7.3.0/dist/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2.1.2/dist/videojs-flash.min.js"></script>
</head>
<body>

<video width="600"
       height="400"
       id="example"
       class="video-js vjs-default-skin vjs-big-play-centered"
       controls
       autoplay
       preload="auto"
       data-setup='{"techorder" : ["flash","html5"] }'>
    <source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd" type="rtmp/mp4">
</video>

</body>
<script>
    var player = videojs('example');
    player.play();
</script>
</html>

文章首发: https://baijifeilong.github.io


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

电脑报(上下册)

电脑报(上下册)

电脑报社 / 西南师范大学出版社 / 2006-12-01 / 45.00元

全套上、下两册,浓缩2006年电脑报精华文章。附录包含70余篇简明IT应用指南,覆盖软件、硬盘、数码、网络四大领域。配赠权威实用的2006-2007中国计算机年鉴DVD光盘,近1.4GB海量信息与资源超值奉献。8大正版超值软件,涵盖系统维护、系统安全、办公应用、多媒体娱乐等四大领域。微软、腾讯、友立等知名厂商,新年献礼。提供2006-2007全系列硬件、数码产品资讯,兼具知识性与资料性。官方网站全......一起来看看 《电脑报(上下册)》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具