以下是直接在HTML文件中集成SkeyeWebPlayer播放器的详细步骤和示例：

前提准备

  1. 获取skeyewebplayer.js文件
    从SkeyeWebPlayer的Gitee仓库下载源码，在dist目录中可找到编译好的webplayer.js（或类似命名的核心JS文件），也可通过仓库提供的CDN地址直接引入（若有）。
  2. HTML页面基础结构
    确保页面中存在一个用于承载播放器的容器（如div），并引入播放器JS文件。

完整集成示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>SkeyeWebPlayer示例</title>
  <!-- 引入播放器核心JS -->
  <script src="path/to/webplayer.js"></script> <!-- 替换为实际的JS文件路径 -->
  <style>
    /* 播放器容器样式（按需调整） */
    #playerContainer {
      width: 800px;
      height: 450px;
      margin: 20px auto;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <!-- 播放器容器 -->
  <div id="playerContainer"></div>

  <script>
    // 等待页面加载完成后初始化播放器
    window.onload = function() {
      // 1. 配置播放参数
      const streamUrl = "http://your-stream-url"; // 流媒体地址（支持FLV、HLS、RTSP等）
      const containerId = "playerContainer"; // 容器ID

      // 2. 初始化播放器
      const player = new WebMediaPlayer(
        streamUrl, // 视频流地址
        containerId, // 容器ID
        // 事件回调函数（可选）
        function(event) {
          console.log("播放器事件：", event);
          switch(event.type) {
            case "play":
              console.log("开始播放");
              break;
            case "pause":
              console.log("暂停播放");
              break;
            case "error":
              console.error("播放错误：", event.msg);
              break;
          }
        },
        // 配置选项（可选）
        {
          decodeType: "auto", // 解码方式：auto/software/hardware
          openAudio: true, // 是否开启音频
          height: true, // 自动保持16:9比例
          showMode: 1, // 显示模式：1（铺满）/0（按比例）
          // 其他配置：如是否显示控制栏、自动重连等（参考官方文档）
        }
      );

      // 3. 可选：调用播放器方法
      // 例如：手动触发播放
      // player.play();

      // 例如：发送消息到播放器界面
      player.$message({
        duration: 3000, // 消息显示时长（毫秒）
        message: "欢迎使用SkeyeWebPlayer",
        callback: (index) => {
          console.log("消息关闭回调，索引：", index);
        }
      });
    };
  </script>
</body>
</html>

关键说明

  1. 路径注意事项
    src="path/to/webplayer.js"需替换为实际的JS文件路径（本地路径或CDN地址），若路径错误会导致播放器无法初始化。

  2. 流媒体地址格式
    根据协议不同，地址格式示例：

    • HTTP-FLV：http://xxx/stream.flv
    • HLS（m3u8）：http://xxx/stream.m3u8
    • WS-FLV：ws://xxx/stream.flv
    • RTSP（需通过WS转发）：ws://xxx/rtsp/stream

  3. 配置选项与事件

    • 配置选项（第4个参数）可根据需求调整，如关闭音频（openAudio: false）、设置解码方式等，具体参考仓库文档。
    • 事件回调（第3个参数）可监听播放状态、错误信息等，便于业务逻辑处理。

  4. 常见问题

    • 若播放失败，先检查流地址是否有效（可通过VLC等工具测试）。
    • 浏览器兼容性：优先使用Chrome、Firefox等现代浏览器，部分协议（如WebRTC）在低版本浏览器中可能不支持。
    • 跨域问题：若流地址与页面域名不同，需确保服务端已配置CORS跨域许可。

如需更详细的API说明或高级功能（如录像、截图），可查阅SkeyeWebPlayer的官方文档中的使用手册。