Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>H5LiveClient 1.0</title> <meta charset="utf-8" /> <style> .btn { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px; color: #fff; background-color: #409eff; border-color: #409eff; width: 100%; }
.btn-danger { color: #fff; background-color: #f56c6c; border-color: #f56c6c; }
.btn-success { color: #fff; background-color: #67c23a; border-color: #67c23a; }
.player-wrapper { width: 900px; height: 500px; /*overflow-y: auto;*/ margin: 0 auto; text-align: center; }
.btn-wrapper { width: 900px; height: 50px; margin: 0 auto; margin-top: 10px; }
.player-wrapper canvas { width: 100%; height: 100%; }
.logs { border: 1px solid #333; width: 900px; height: 300px; margin: 0 auto; overflow-y: auto; padding: 5px; } </style></head>
<body> <div class="player-wrapper"> <canvas id="canvas" style="background-color: #0D0E1B"></canvas> </div> <div class="btn-wrapper"> <div id="playDom"> <button class="btn" id="play">播放</button> </div> <div id="stopDom" style="display: none"> <button class="btn btn-danger" id="stop">结束</button> </div> </div>
<div id="logout" class="logs"> </div>
<script src="./ajax.js"></script> <script> onerror = handleErr; var txt = ""; var h5lc = null; var $play = document.getElementById('play'); var $stop = document.getElementById('stop'); var $playDom = document.getElementById('playDom'); var $stopDom = document.getElementById('stopDom'); var canvas = document.getElementById("canvas"); var isPlaying = false; disabledMouseWheel(canvas);
$play.addEventListener('click', function () { if (isPlaying) { return; } isPlaying = true; play(); $playDom.style.display = 'none'; $stopDom.style.display = 'block'; });
$stop.addEventListener('click', function () { if (!isPlaying) { return; }
isPlaying = false; stop();
$playDom.style.display = 'block'; $stopDom.style.display = 'none'; });
function play() { h5lc.play("ws://3.1.39.135:8080/live/345.flv", canvas) // h5lc.play("ws://localhost:8080/live/user1", canvas) // h5lc.play("ws://119.9.118.39:8080/live/user1", canvas) // h5lc.play("ws://test.qihaipi.com/gnddragon/test.flv", canvas) }
function stop() { h5lc.close() }
function disabledMouseWheel(ele) { if (ele.addEventListener) { ele.addEventListener('DOMMouseScroll', scrollFunc, false); } //W3C ele.onmousewheel = scrollFunc; //IE/Opera/Chrome }
function scrollFunc(evt) { evt = evt || window.event; if (evt.preventDefault) { // Firefox evt.preventDefault(); evt.stopPropagation(); } else { // IE evt.cancelBubble = true; evt.returnValue = false; } return false; }
function handleErr(msg, url, l) { txt = "There was an error on this page.\n\n"; txt += "Error: " + msg + "\n"; txt += "URL: " + url + "\n"; txt += "Line: " + l + "\n\n"; document.getElementById("logout").innerHTML += txt + "<br>"; return true; }
var Module = { print: (function () { return function (text) { if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); document.getElementById("logout").innerHTML += text + "<br>"; // These replacements are necessary if you render to raw HTML //text = text.replace(/&/g, "&"); //text = text.replace(/</g, "<"); //text = text.replace(/>/g, ">"); //text = text.replace('\n', '<br>', 'g'); console.log(text); }; })(), printErr: function (text) { if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); document.getElementById("logout").innerHTML += text + "<br>"; if (0) { // XXX disabled for safety typeof dump == 'function') { dump(text + '\n'); // fast, straight to the real console } else { console.error(text); } }, postRun: function () { h5lc = new H5LiveClient(); h5lc.videoBuffer = 1; } }; </script> <script src="./hevc_aac.js"></script></body>
</html>
|
