自定义HTML5视频播放器与"Stats for nerds"

我的任务是研究一种为内部指标/测量构建流视频测试框架的方法。

长话短说，我想构建一个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>

您可以使用

VideoPlayBackQuality界面获取丢帧。

指：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/getVideoPlaybackQuality
https://developer.mozilla.org/en-US/docs/Web/API/VideoPlaybackQuality

相关内容

最新更新

热门标签：