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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!DOCTYPE HTML>
<html>
<head>
<script type="application/javascript">
</script>
</head>
<body>
<p id="out"></p>
<video id="v1" style="position:absolute; left:0; top:0"></video>
<canvas id="canvas"></canvas>
<script type="application/javascript">
/* READ ME first.
The script is trying to make a reftest sample for reftest.
HOW TO USE:
1. Choose the first or last frame you want to generate. And set
window.onload function to dumpFirstFrame/dumpLastFrame.
2. Set the video.src in dumpFirstFrame/dumpLastFrame.
3. Run the script on browser.
4. Copy the base64 image url to your xxx-ref.html(short.mp4.firstframe-ref.html).
You might hit security error if the video.src cross origin.
Enable "media.seekToNextFrame.enabled" for the seekToNextFrame function
or using nightly, the seekToNextFrame() ensure the ended event fired.
*/
//window.onload = function() { setTimeout(dumpFirstFrame, 0); };
//window.onload = function() { setTimeout(dumpLastFrame, 0); };
window.onload = function() { setTimeout(function(){dumpNthFrame(15);}, 0); };
function drawVideoToInnerHTML(v) {
var canvas = document.getElementById("canvas");
canvas.width = v.videoWidth;
canvas.height = v.videoHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);
var dataURL = canvas.toDataURL();
document.getElementById("out").innerHTML=dataURL;
}
function dumpFirstFrame() {
var video = document.getElementById("v1");
video.src = "short.mp4";
video.preload = "metadata";
video.addEventListener("loadeddata", function() {
drawVideoToInnerHTML(video);
});
}
function dumpNthFrame(n) {
var video = document.getElementById("v1");
video.src = "street.mp4";
video.preload = "metadata";
function checkNthFrame() {
console.log((15-n+1)+"th Frame time is " + video.currentTime);
n--;
if (n == 0) {
drawVideoToInnerHTML(video);
} else {
video.seekToNextFrame();
}
}
video.addEventListener("loadeddata", checkNthFrame);
video.addEventListener("seeked", checkNthFrame);
}
function dumpLastFrame() {
var video = document.getElementById("v1");
video.src = "short.mp4";
video.preload = "metadata";
video.seenEnded = false;
// Seek to the end
video.addEventListener("loadeddata", function() {
video.currentTime = video.duration;
video.onseeked = () => {
video.onseeked = null;
callSeekToNextFrame();
};
});
function callSeekToNextFrame() {
video.seekToNextFrame().then(
() => {
if (!video.seenEnded)
callSeekToNextFrame();
},
() => {
// Reach the end, do nothing.
}
);
}
video.addEventListener("ended", function() {
video.seenEnded = true;
drawVideoToInnerHTML(video);
});
}
</script>
</body>
</html>
|
