Skip to content

【说明】创建播放器

Jump to bottom
Numberwolf-Yanlong edited this page Feb 9, 2023 · 10 revisions

当前版本的token

token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
Remind

  • 目前dist的产出文件都在根目录，所以如果想要使用 example_normal example_vue等 demo，需要拷贝 dist/dist-multi-thread 到这些demo路径下。

  • 如果你支持Shell环境，可以直接允许 sh init.sh初始化

Demo

简易Demo - 方便读代码（但是因为debug信息较多，这个demo不代表真实性能） index-debug.html

如果想使用底层的265解码器能力 可以看 h265web.js-wasm-decoder

0）如果用的是dist-multi-thread的多线程版本版本：服务器添加Header

  • 添加如上headers到服务器, 重启服务器即可 （同时必须是HTTPS访问才可以）
        add_header Cross-Origin-Opener-Policy 'same-origin';
        add_header Cross-Origin-Embedder-Policy 'require-corp';

image

1）引入包

  • 单线程版本
<script src="dist/missile.js"></script>
<script src="dist/h265webjs-v20211016.js"></script>
  • 多线程版本
<script src="dist-multi-thread/missile-multi-thread.js"></script>
<script src="dist-multi-thread/h265webjs-v20211016.js"></script>

播放器配置

  • 创建代码如下
const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认播放器内核
const PLAYER_CORE_TYPE_CNATIVE = 1; // 实验播放器内核

var config = {
    player: "glplayer",
    width: 960,
    height: 540,
    token : token,
    extInfo : {
        moovStartFlag : true
    }
};
  • 配置详解
配置项 类型 可选值 必填 说明
type String mp4/hls/ts/raw265/flv 否 播放文件的类型,不填写自动识别
player String - 是 播放窗口的dom的id值
width Int - 是 播放窗口的宽度
height Int - 是 播放窗口的高度
token String - 是 播放器token值
extInfo Object - 否 播放器额外配置
+ moovStartFlag Bool true/false 否:默认false Mp4的moov box是否前置 关联到动态加载
+ rawFps Float32 例如:30 否:默认24 HEVC/AVC裸流播放时候的帧率设定
+ autoCrop Bool - 否:默认false 如果播放器配置的长宽与视频纵横比不匹配，自动裁剪黑边区域
+ core Int - 否:默认0 0:默认播放内核
1:备用播放内核
+ coreProbePart Float32 - 否:默认1.0 探测Mp4媒体的属性，百分比 0.0~1.0,正常moov前置的文件都用0.1(10%)可以（只适用于备用播放内核)
+ ignoreAudio Int - 否:默认0 0:带音频播放
1:忽略音频播放(只对H265视频生效)
+ probeSize Int - 否:默认4096 HTTP-FLV直播模式下的探测长度
+ autoPlay Bool true/false 否:默认不开启 是否开启自动播放
HTTP-FLV 265+264
HTTP-TS 265+264
HLS 264
+ cacheLength Int [5, ∞+] 否:默认50帧 是否手动设置缓存长度
MP4 265

初始化播放器

  • 务必注意！！！

请将你整体项目最终编译出来的JS目标文件 与 wasm文件放置于同一级目录

  • 例如
	./dist/你最终编译产出.js
	./dist/sdk file
	./index.html
  • 创建方法(全局方法)

new265webjs(播放地址, 播放器配置)

参数 类型 默认值 必填 说明
播放地址 String - 是 播放视频地址
播放器配置 Object - 是 播放器配置信息

  • 播放地址规则：

  • 创建示例Demo

    • 1）路径 + 配置

      • 例子1 创建 mp4/hls/ts类型播放器
       let url = "h265_test.mp4";
 let config = {
     player: "glplayer",
     width: 960,
     height: 540,
     token : token,
     extInfo : {
         moovStartFlag : true
     }
 };
      • 例子2 创建raw265类型 播放h265裸流 播放器（包括直播）
       let config = {
     player: "glplayer",
     width: 960,
     height: 540,
     token : token,
     extInfo : {
         rawFps : 30 // 播放帧率
     }
 };

 * 例子3 创建`FLV`点播播放器

 ```javascript
 const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认播放器
 const PLAYER_CORE_TYPE_CNATIVE = 1; // 备用播放内核
 let config = {
             player: "glplayer",
             width: 960,
             height: 540,
             token : token,
             extInfo : {
                 moovStartFlag : true,
                 coreProbePart : 0.1,
                 ignoreAudio : 0
             }
         };

    • 2）创建播放器

        1. 以普通script src方式引入

      示例:

       let player = window.new265webjs(url, config);
        1. 以require('./src/h265webjs');引入为前提

      示例：

       let player = window.new265webjs(url, config); // 全局方法
        1. 以import H265webjsModule from './dist/index';引入为前提 （推荐）

      示例：

       let player = H265webjsModule.createPlayer(videoURL, config);
        1. 如果创建的是raw265类型的Websocket等直播裸流数据播放 请注意 (普通265点播流直接填写url播放就可以，不需要走如下流程)
        • 请填写raw265类型, 添加rawFps选项设置播放帧率
         config = {
     	    type: 'raw265',
      	    player: "glplayer",
      	    width: 960,
      	    height: 540,
      	    // accurateSeek : true,
      	    token : token,
      	    extInfo : {
          	        rawFps: 24,
          	        moovStartFlag : true,
          	        coreProbePart : 0.1,
          	        ignoreAudio : 0,
          	        probeSize : 8192,
          	        autoPlay : true,
      	    }
  	        };
                  * 新建player,绑定所有事件events回调，并且执行player.do()后, 进行append数据
               ```javascript
               // append raw 265 nalu frame
               /**
                * @brief append frame when 265 raw mode
                * @param Uint8Array frame
                * @return
                */
                append265NaluFrame(frame) {
                /*
                nalBuf = frame.data;
                pts = frame.pts;
                */
               ```

我还有其他问题没有得到解决？

您可以通过ISSUE的方式,按照格式模板进行提问,或者加QQ群925466059得到帮助。提问前请遵守提问的智慧。

【提问】ISSUE中文模板

  • 提问注意点（杜绝消极提问）：
    • 严格按照ISSUE模板提供必要信息
    • 严禁 牙膏主义方式提问：禁止挤牙膏问答式提问(效率低下，维护者作者们都很忙，请一次性把所有信息吐出来（多打点字，多发点图）
    • 严禁私聊（具体原因看WIKI首页【作者说】为什么不建议私聊）

如果不按照以上方式提问题，作者无义乌积极回应。

捐赠

微信 支付宝 PayPal
TODO

我还有其他问题。

您可以通过ISSUE的方式,按照格式模板进行提问,或者加群925466059得到帮助。提问前请遵守提问的智慧。

Clone this wiki locally