自定义HTML5视频播放器,带有#34;用于书呆子的统计数据"

时间:2016-04-28 21:45:32

标签: html5 video

我的任务是寻找一种为内部指标/衡量标准构建流式视频测试框架的方法。

我想要构建一个可以使用流和中继性能指标的HTML5播放器,特别是

平均比特率 丢帧 启动时间 档位

阅读html5规范 - 我能够为停顿,等待等添加事件监听器,我将能够从中构建一个统计框架,但是我如何获得像丢帧和比特率这样的东西 - 任何可用的现代浏览器?

我一直在谷歌搜索,我确实找到了关于moz的旧讨论,但我还没有找到更多。

非常感谢任何帮助。

我的代码带有事件监听器......

<!DOCTYPE html> 
<html> 
<head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head> 
<body >
    <div id="output"></div>
    <video id="myVideo" width="320" height="176" controls autoplay>
        <source src="/ak-5-y.mp4" type='video/mp4'>
        Your browser does not support HTML5 video.
    </video>
    <script>

        var media = document.getElementById('myVideo');

        // Playing event
        var isStalled = function(e) { $("#output").html("Playback Stalled"); };

        var isWaiting = function(e) { $("#output").html("Waiting for content"); };

        var isPlaying = function(e) { $("#output").html("Playing event triggered"); };

        // Pause event
        var onPause = function(e) { $("#output").html("Pause event triggered"); };

        // Volume changed event
        var onVolumechange = function(e) { $("#output").html("Volumechange event triggered"); };

        media.addEventListener("playing", isPlaying, false);    
        media.addEventListener("stalled", isStalled, false); 
        media.addEventListener("waiting", isWaiting, false);   
        media.addEventListener("pause", onPause, false);
        media.addEventListener("volumechange", onVolumechange, false);

    </script>   
</body> 
</html>

1 个答案:

答案 0 :(得分:0)