江海明珠网 – 南通卫视/南通广播电视台 在线直播

浙江卫视

浙江卫视：https://www.cztv.com/liveTV

直播源：http://www.kodiplayer.cn/movie/2898.html

直播源：https://github.com/ngo5/IPTV

嵌入代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HLS.js with P2P Streaming</title>
    <!-- 引入 HLS.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.1/dist/hls.min.js"></script>
    
    <!-- 配置 P2P Media Loader 模块路径 -->
    <script type="importmap">
        {
            "imports": {
                "p2p-media-loader-core": "https://cdn.jsdelivr.net/npm/p2p-media-loader-core@^2/dist/p2p-media-loader-core.es.min.js",
                "p2p-media-loader-hlsjs": "https://cdn.jsdelivr.net/npm/p2p-media-loader-hlsjs@^2/dist/p2p-media-loader-hlsjs.es.min.js"
            }
        }
    </script>
    
    <!-- 基础样式 -->
    <style>
        body { margin: 0; padding: 20px; background: #000; }
        video { max-width: 100%; height: auto; display: block; margin: 0 auto; }
    </style>
</head>
<body>
    <!-- 视频容器 -->
    <video id="video-player" controls width="800px">
        <p>Your browser does not support the video tag.</p>
    </video>

    <script type="module">
        // 检查浏览器支持
        const isP2PSupported = 
            HTMLScriptElement.supports("importmap") && Hls.isSupported();

        let hlsPlayer; // HLS.js 实例（带 P2P 功能）

        // 初始化 P2P 增强的 HLS.js
        async function initP2PHls() {
            if (!isP2PSupported) {
                console.log("浏览器不支持 P2P 或 HLS.js");
                return;
            }

            // 动态导入 P2P Media Loader 引擎
            const { HlsJsP2PEngine } = await import("p2p-media-loader-hlsjs");
            
            // 注入 P2P 功能到 HLS.js
            const HlsWithP2P = HlsJsP2PEngine.injectMixin(Hls);
            
            // 创建 HLS.js 实例
            hlsPlayer = new HlsWithP2P({
                p2p: {
                    core: {
                        swarmId: "my-hls-p2p-stream", // 自定义流标识（同一 swarmId 可形成 P2P 集群）
                        trackerList: ["wss://tracker.webtorrent.io"], // WebTorrent tracker 地址（可选，默认使用公共 tracker）
                        maxPeers: 50, // 最大连接 peer 数（默认 200）
                    },
                    // 监听 P2P 事件
                    onHlsJsCreated: (hls) => {
                        // 监听 peer 连接事件
                        hls.p2pEngine.addEventListener("onPeerConnect", (params) => {
                            console.log(`新 Peer 连接: ${params.peerId}`);
                        });
                        // 监听 P2P 流量统计
                        hls.p2pEngine.addEventListener("onStatsUpdate", (stats) => {
                            const p2pRatio = (stats.p2pBytes / (stats.p2pBytes + stats.serverBytes)) * 100;
                            console.log(`P2P 流量占比: ${p2pRatio.toFixed(1)}%`);
                        });
                    }
                }
            });

            // 绑定视频容器
            hlsPlayer.attachMedia(document.getElementById("video-player"));
            // 加载 HLS 流（替换为你的流地址）
            hlsPlayer.loadSource("https://ali-m-l.cztv.com/channels/lantian/channel001/1080p.m3u8");
        }

        // 初始化播放器
        initP2PHls();

        // 错误处理
        if (hlsPlayer) {
            hlsPlayer.on(Hls.Events.ERROR, (event, data) => {
                console.error("HLS.js 错误:", data);
                if (data.fatal) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            console.log("网络错误，尝试重新加载...");
                            hlsPlayer.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            console.log("媒体错误，可能是流地址无效");
                            break;
                    }
                }
            });
        }
    </script>
</body>
</html>

南通一套·新闻综合频道

南通二套·社教频道

南通三套·崇川频道

南通广播电视台

南通电视台：https://www.ntjoy.com/ntw/broadcastTvs.html?menuCode=ntw005
阿里云播放器：https://player.alicdn.com/aliplayer/setting/setting.html
VIDEO.JS：https://www.jsdelivr.com/package/npm/video.js
南通综合：https://nt-hls.ntjoy.com/live/4f1.m3u8
南通二号：https://nt-hls.ntjoy.com/live/4f3.m3u8
南通崇川：https://nt-hls.ntjoy.com/live/4f5.m3u8

在线直播代码

<head>
  <link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">
  <!-- 引入 Video.js 脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<center>
<body>
  <video
    id="my-video"
    class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
    controls
    preload="auto"
    width="540"
    height="360"
    poster="图片地址"
    data-setup="{}"
  >
    <source src="视频链接" 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="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  <!-- 初始化 Video.js -->
  <script>
    var player = videojs('my-video');
  </script>
  <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</body>
</center>

国内源代码

<head>
  <link href="https://cdn.staticfile.net/video.js/8.10.0/video-js.min.css" rel="stylesheet">
  <!-- 引入 Video.js 脚本 -->
  <script src="https://cdn.staticfile.net/video.js/8.10.0/video.min.js"></script>
  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<center>
<body>
  <video
    id="my-video"
    class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
    controls
    preload="auto"
    width="540"
    height="360"
    poster="图片链接"
    data-setup="{}"
  >
    <source src="视频链接" 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="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  <!-- 初始化 Video.js -->
  <script>
    var player = videojs('my-video');
  </script>
</body>
</center>

JS/CSS CDN

jsDelivr：https://www.jsdelivr.com/

BootCDN：https://www.bootcdn.cn/

Staticfile CDN：https://www.staticfile.net/

打赏微海报分享
标签

相关文章