master

分支 (1)

管理

管理

master

WasmVideoPlayerWebScoket
/
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">
            <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:400px"/>
            </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="player">
            <span class="no-padding">
                <img src="img/playwhite.png" class="left" id="btnPlayVideo" onclick="playVideo()" />
            </span>
            <span class="track-padding">
            </span>
            <span class="no-padding">
                <input id="timeTrack" type="range" value="0">
            </span>
            <span class="no-padding right">
                <img src="img/fullscreen.png" class="right" id="btnFullscreen" onclick="fullscreen()" />
            </span>
            <span class="no-padding" style=" padding-left:10px;">
                <label id="timeLabel">00:00:00/00:00:00</label>
            </span>
        </div>
    </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:'http://11.25.73.57/proxy/1.flv',
                waitLength : 512 * 1024,
                stream: true,
            },
            ws: {
                url:'ws://11.25.73.57/proxy/1.flv',
                waitLength : 512 * 1024,
                stream: true,
            },
            httpFlv: {
                url: "video/720P2M30fpsh265-wasmtest.flv",
                waitLength : 512 * 1024,
                stream: false, //下载好的视频文件stream的值要为false
            }
        };
        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/playwhite.png";
            } else {
                el.src = "img/pausewhite.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/playwhite.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>