HTML 直播 RTMP流实时播放

夜慬凉

已于 2022-01-20 17:57:36 修改

阅读量3.7w

点赞数 8

于 2019-09-17 18:02:51 首次发布

本文链接：https://blog.csdn.net/qq_27933251/article/details/100934296

版权

html 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

rtmp

2 篇文章 0 订阅

订阅专栏

video

1 篇文章 0 订阅

订阅专栏

HTML 直播 RTMP流实时播放

直接帖代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="playercontainer"></div>
<script type="text/javascript" src="js/cyberplayer.js"></script>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: 680,
        height: 448,
        file: "rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1",
        autostart: true,
        stretching: "uniform",
        volume: 100,
        controls: true,
        rtmp: {
            reconnecttime: 5, // rtmp直播的重连次数
            bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
        },
        ak: "gC4c68fZAyFKhKgjjFWIhyeNDC0V9x2n"
    });
</script>
</body>
</html>

在这里插入图片描述
这是我自己修改了js之后的效果，去掉了百度ak验证，去掉了logo，其他功能都正常，可以用，代码都是封装好的，对自己来说也简单些。

关于cyberplayer参数设置说明：

flashplayer	指定flash播放器swf文件的存放地址，可以是相对路径，也可以http协议开头的绝对路径。省略该参数则自动在js所在路径寻找cyberplayer.flash.swf文件。
width	指定要创建的播放窗口的宽度。
height	指定要创建的播放窗口的高度。
autostart	设置是否在播放器载入后自动播放：true : 自动播放；false : 不自动播放。
repeat	设置视频的重复播放模式，重复模式分为：1.false:无重复； 2.true:重复播放
file	设置媒体流名称或文件名或M3U8播放列表地址
image	设置媒体流的预览图
volume	设置播放器音量大小，范围（0 - 100）
controls	设置播放器控制条的显示模式，显示模式分为：1.none:不显示；2.over:悬浮（鼠标无操作时自动隐藏）
barLogo	设置是否显示Logo，controls的子参数，可选值为true (显示)，false（不显示）
skin	设置播放器皮肤包
stretching	设置播放器缩放方式，缩放方式分为：1.none:不缩放；2.uniform:添加黑边缩放；3. exactfit:改变宽高比缩到最大；4.fill:剪切并缩放到最大（默认方式为uniform）

源码下载：链接: https://pan.baidu.com/s/1Ls8K757KZ3t-iCSWFfXMkQ 提取码: pffb

这个是百度云提供的，目前需要ak验证，大家可以自行研究一下

夜慬凉

关注

8
点赞
踩
42

收藏

觉得还不错? 一键收藏
12
评论
HTML 直播 RTMP流实时播放

HTML 直播 RTMP流实时播放直接帖代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><div id="playercontainer...
复制链接

扫一扫