直播尝试

194 阅读1分钟

直播尝试

提供了推流地址(服务器+串流密钥)、拉流地址(.m3u8)、观看地址

直播软件:OBS-Studio

播放器:TcPlayer

直播推流设置

代码部分

需要引入的js:TcPlayer.js、hls.min.js(支持html播放m3u8视频流)

TcPlayer播放器文档:

cloud.tencent.com/document/pr…

创建一个空的div元素以承载视频流的内容

<html>
    <head>
        <meta charset="utf-8" />
        <title>直播</title>
        <script
            src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"
            charset="utf-8"
        ></script>
        <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
    </head>

    <body>
        <div id="id_test_video" style="width: 100%; height: auto"></div>
        <script>
            var player = new TcPlayer('id_test_video', {
                m3u8: '', //请替换成实际可用的播放地址
                autoplay: true, //iOS 下 safari 浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
                controls: false,
                width: '500', //视频的显示宽度,请尽量使用视频分辨率宽度
                height: '500', //视频的显示高度,请尽量使用视频分辨率高度
            });
        </script>
    </body>
</html>