Blame view

node_modules/videojs-contrib-media-sources/test/perf.html 2.8 KB
2a09d1a4   liuqimichale   添加宜春 天水 宣化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
  <!doctype html>
  <link rel="stylesheet" href="/node_modules/video.js/dist/video-js/video-js.css">
  <style>
    p {
      background-color: #cbcbcb;
      border-radius: 5px;
      border: thin solid #333;
      padding: 5px;
    }
  </style>
  <p>This page pushes random bytes into a SourceBuffer to allow easy testing of ExternalInterface bandwidth. If ExternalInterface cannot transmit bytes to the video.js SWF at a greater rate than the video bitrate without using up too much CPU, playback will be interrupted.</p>
  <video
     class="video-js vjs-default-skin"
     width="960"
     height="400"
     controls>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    Your browser does not support HTML video.
  </video>
  
  <form>
    <legend>Test Parameters</legend>
    <label>
      Number of bytes per append:
      <input id="byte-count" type="number" min="1" value="1000">
    </label>
    <label>
      Number of appends:
      <input id="append-count" type="number" min="1" value="10000">
    </label>
  </form>
  <button disabled>Run Test</button>
  <table>
    <caption>Test Results</caption>
    <thead>
      <tr><td>Bytes</td><td>Appends</td><td>Elapsed Milliseconds</td></tr>
    </thead>
    <tbody id="results"></tbody>
  </table>
  <script src="/node_modules/video.js/dist/video-js/video.js"></script>
  <script src="/dist/videojs-contrib-media-sources.js"></script>
  <script>
  var player = videojs(document.querySelector('video'), {
    techOrder: ['flash', 'html']
  }, function() {
    var mediaSource = new videojs.MediaSource();
    mediaSource.addEventListener('sourceopen', function(event) {
      var sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"'),
          button = document.querySelector('button');
  
      button.disabled = false;
      button.addEventListener('click', function() {
        var byteCount = +document.querySelector('#byte-count').value,
            bytes = new Uint8Array(byteCount),
            appendCount = +document.querySelector('#append-count').value,
            i = appendCount,
            result = document.createElement('tr'),
            printResults = function() {
              result.innerHTML = '<td>' + byteCount + '</td><td>' +
                                 appendCount + '</td><td>' +
                                 (Date.now() - start) + '</td>';
              document.querySelector('#results').appendChild(result);
              sourceBuffer.removeEventListener('updateend', printResults);
              button.disabled = false;
            },
            start;
  
        button.disabled = true;
        sourceBuffer.addEventListener('updateend', printResults);
        start = Date.now();
        while (i--) {
          sourceBuffer.appendBuffer(bytes, player);
        }
      }, false);
    }, false);
  
    player.src({
      src: videojs.URL.createObjectURL(mediaSource),
      type: "video/flv"
    });
  });
  </script>