WasmVideoPlayer
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WASM TEST</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <link rel="stylesheet" href="styles/style.css">
</head>

<body>
    <div class="container" id="videoPlayer">
        <div class="sideBar">
            <span class="no-padding">
                <img src="img/home.png" class="left" id="btnHome" title="Visit My Homepage" onclick="window.open('https://blog.csdn.net/sonysuqin')" />
            </span>
            <div id="input">
                <select id="protocol" onchange="onSelectProto()">
                    <option value="http">HTTP</option>
                    <option value="ws">WS</option>
                    <option value="httpFlv">HTTP-FLV</option>
                </select>
                <input type="text" id="inputUrl" style="width:300px"/>
            </div>
        </div>
        <div class="canvasDiv">
            <div class="loadEffect" id="loading" style="display:none;">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <canvas id="playCanvas" width="852" height="480"></canvas>
        </div>
        <div class="sideBar">
            <span class="no-padding">
                <img src="img/play.png" class="left" id="btnPlayVideo" onclick="playVideo()" />
            </span>
            <span class="no-padding" style=" padding-left:5px;">
                <img src="img/stop.png" class="left" id="btnStopVideo" onclick="stopVideo()" />
            </span>
            <span class="track-padding">
            </span>
            <span class="no-padding">
                <input id="timeTrack" type="range" value="0">
            </span>
            <span class="no-padding" style=" padding-left:10px;">
                <label id="timeLabel">00:00:00/00:00:00</label>
            </span>
            <span class="no-padding right">
                <img src="img/fullscreen.png" class="right" id="btnFullscreen" onclick="fullscreen()" />
            </span>
        </div>
    </div>
    <div id="footer">Copyright &copy; 2019 sonysuqin.All rights reserved.</div>

    <script type='text/javascript' src="common.js"></script>
    <script type='text/javascript' src="pcm-player.js"></script>
    <script type='text/javascript' src="webgl.js"></script>
    <script type='text/javascript' src="player.js"></script>
    <script type='text/javascript'>
        var defaultProtos = {
            http: {
                url: "https://roblin.cn/wasm/video/h265_high.mp4",
                waitLength : 512 * 1024,
                stream: false,
            },
            ws: {
                url: "wss://roblin.cn/wss/h265_high.mp4",
                waitLength : 512 * 1024,
                stream: false,
            },
            httpFlv: {
                url: "https://data.vod.itc.cn/bee/qf/wasm?tok=e4da89d923e4e2af4d622a0edb717f88827b422a&format=flv&direct=1",
                waitLength : 512 * 1024,
                stream: true,
            }
        };
        let inputUrl = document.getElementById("inputUrl");
        inputUrl.value = defaultProtos["http"]["url"];

        //Player object.
        self.player = new Player();

        var loadingDiv = document.getElementById("loading");
        self.player.setLoadingDiv(loadingDiv);

        //Formated logger.
        var logger = new Logger("Page");

        function playVideo() {
            var protoList = document.getElementById("protocol");
            var proto = protoList.options[protoList.selectedIndex].value;
            var protoObj = defaultProtos[proto];
            var inputUrl = document.getElementById("inputUrl");
            var url = inputUrl.value;

            var el = document.getElementById("btnPlayVideo");
            var currentState = self.player.getState();
            if (currentState == playerStatePlaying) {
                el.src = "img/play.png";
            } else {
                el.src = "img/pause.png";
            }

            if (currentState != playerStatePlaying) {
                const canvasId = "playCanvas";
                var canvas = document.getElementById(canvasId);
                if (!canvas) {
                    logger.logError("No Canvas with id " + canvasId + "!");
                    return false;
                }

                self.player.play(url, canvas, function (e) {
                    console.log("play error " + e.error + " status " + e.status + ".");
                    if (e.error == 1) {
                        logger.logInfo("Finished.");
                    }
                }, protoObj.waitLength, protoObj.stream);

                var timeTrack = document.getElementById("timeTrack");
                var timeLabel = document.getElementById("timeLabel");
                self.player.setTrack(timeTrack, timeLabel);
            } else {
                self.player.pause();
            }

            return true;
        }

        function stopVideo() {
            self.player.stop();
            var button = document.getElementById("btnPlayVideo");
            button.value = "Play";
            button.src = "img/play.png";
        }

        function fullscreen() {
            self.player.fullscreen();
        }

        function onSelectProto() {
            var protoList = document.getElementById("protocol");
            var proto = protoList.options[protoList.selectedIndex].value;
            var protoObj = defaultProtos[proto];
            var inputUrl = document.getElementById("inputUrl");
            inputUrl.value = protoObj["url"];
        }
    </script>
</body>
</html>