腾讯云播放器TcPlayer实现网络直播

最新推荐文章于 2024-03-08 13:26:24 发布

~时倾

最新推荐文章于 2024-03-08 13:26:24 发布

阅读量1.1k

点赞数

分类专栏：视频直播文章标签：腾讯 TcPlayer

本文链接：https://blog.csdn.net/weixin_43866812/article/details/119575279

版权

视频直播专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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>
    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet">
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js"></script>
</head>

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


</html>

~时倾

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
腾讯云播放器TcPlayer实现网络直播

<!DOCTYPE html><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> <link
复制链接

扫一扫