h265web.js-pro

Appearance

SIMPLE DEMO / 简单示例 ​

Directory Structure / 目录结构 ​

js
root -
    ├── index.html
    ├── index.js
    ├── style.css
    ├── hevc_test_moov_set_head_16s.mp4
    ├── output
        ├── h265web.js
        ├── h265web_wasm.js
        ├── h265web_wasm.wasm
        ├── extjs.js
        ├── extwasm.js

在root启动一个webserver ​

root=> http://localhost:8080/

PYTHON:

bash
python3 -m http.server 8080

NODEJS:

bash
npm install -g http-server
http-server -p 8080

index.html ​

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="./output/h265web.js"></script>
</head>
<body>
    <div id="canvas111"></div>
    <div class="control-container">
        <button id="play_btn" onclick="play()" disabled>PLAY</button>
        <button id="pause_btn" onclick="pause()" disabled>PAUSE</button>
        <button id="voice_btn" onclick="set_voice()" disabled>VOLUME</button>
    </div>
    <div class="mode-container">
        <button onclick="build_player(1)">WEBCODEC</button>
        <button onclick="build_player(2)">SIMD</button>
        <button onclick="build_player(3)">MSE</button>
    </div>
</body>
</html>

index.js ​

js
var ylplayer = null;
var media_url = "http://localhost:8080/hevc_test_moov_set_head_16s.mp4";

// http://localhost:8080/output/h265web_wasm.js
const wasm_js_uri = window.location.origin  + '/output/h265web_wasm.js';
// http://localhost:8080/output/h265web_wasm.wasm
const wasm_wasm_uri = window.location.origin + '/output/h265web_wasm.wasm';
// http://localhost:8080/output/extjs.js
const ext_src_js_uri = window.location.origin + '/output/extjs.js';
// http://localhost:8080/output/extwasm.js
const ext_wasm_js_uri = window.location.origin + '/output/extwasm.js'

function create(mode=0) {
    if (ylplayer) { // release player before rebuild new player
        ylplayer.release();
        ylplayer = null;
    }
    // 创建播放器方法
    ylplayer = H265webjsPlayer();

    const player_config ={
        player_id: "canvas111",
        wasm_js_uri: wasm_js_uri,
        wasm_wasm_uri: wasm_wasm_uri,
        ext_src_js_uri: ext_src_js_uri,
        ext_wasm_js_uri: ext_wasm_js_uri,
        width: "100%",
        height: isMobileDevice() ? "100%" : 480,
        color: "antiquewhite",
        auto_play: true,
        readframe_multi_times: -1, // av demuxer every feed buffer scale times, default is -1
        // core: 'mse_hevc',
        // core: 'wasm_hevc',
        // core: 'webcodec_hevc',
        ignore_audio: false
    };
    if (mode === 1) {
        player_config.core = 'webcodec_hevc';
    } else if (mode === 2) {
        player_config.core = 'wasm_hevc';
    } else if (mode === 3) {
        player_config.core = 'mse_hevc';
    }
    ylplayer.build(player_config);

    /*
     Player's callback
     */
    ylplayer.on_ready_show_done_callback = function () {
        document.getElementById("play_btn").disabled = false;
        document.getElementById("pause_btn").disabled = false;
        document.getElementById("voice_btn").disabled = false;
    };
    ylplayer.video_probe_callback = function (mediaInfo) {
        console.log("===============>", mediaInfo);
    };

    ylplayer.on_play_time = function(pts) {
        const float_pts = pts; // example :1.11 second
        // document.getElementById("time_info").innerHTML = `play_pts: ${float_pts}`;
    }
    ylplayer.on_seek_start_callback = function (seekTarget) {
    }

    ylplayer.on_seek_done_callback = function (seekTarget) {
    }

    ylplayer.on_cache_process_callback = function (timestamp) {
    };

    ylplayer.on_load_caching_callback = function () {
    };

    ylplayer.on_finish_cache_callback = function (data) {
    };

    ylplayer.on_play_finished = function () {
    };

    ylplayer.video_nalu_callback = function (pts, dts) {
    }
    ylplayer.video_frame_callback = function (pts, w, h, cache_size) {
        v_cache_size = cache_size;
        // document.getElementById("vframe_info").innerHTML = `vframe cache_size: ${cache_size} pts: ${pts}`;
        // console.log("===============>", pts, w, h);
    };
    ylplayer.audio_frame_callback = function (pts, cache_size) {
    };
    ylplayer.video_render_callback = function (pts, w, h) {
        const audio_pts_info = ylplayer.get_audio_pts();
        play_pts = pts;
    };
    ylplayer.audio_render_callback = function (pts) {
    };

    ylplayer.nalu_length_callback = function (nalu_len) {
    }
} // end create

function set_mute() {
    ylplayer && ylplayer.set_voice(0);
}

function set_voice() {
    ylplayer && ylplayer.set_voice(1.0);
}

function loadMedia() {
    ylplayer && ylplayer.load_media(media_url);
}

function build_player(mode=0) {
    create(mode);
    loadMedia(media_url);
}

window.onload = function() {
    build_player();
};