Video perfomance
mrsln opened this issue · 11 comments
Hi!
Using pre-installed test apps I was able to navigate to a page in my local network. The page only has a <video /> tag. I found out that mp4 HD videos freeze for a second every several seconds but it plays smoothly when the video quality is 360p. However, the Youtube app is able to play crispy HD videos smoothly. How can I achieve the same quality?
Thank you!
@mrsln
webOS OSE doesn't support H/W acceleration for HTML5 video tag. So the mp4 HD videos using video tag is not played well. Maintainer of webOS OSE multimedia will reply it soon.
Thank you very much for the reply!
Do you have any idea how Youtube app is able to play crispy videos?
Do you have any idea how Youtube app is able to play crispy videos?
That does not use video tag and webOS OSE supports H/W acceleration in Media Source Extensions case like youtube.
hmmm could it be because VTG is enabled even in horizontal mode?
From LG DS by using texture on the video tag it enables the rotation of the video but by doing so, CSS translateX animations tend to stutter.
by doing a css body { transform: rotate(90deg) } the video will rotate accordingly.
Could it be that VTG is ALWAYS on?
@rip3rs I don't think that VTG is working on webOS OSE. VTG is only applied to the webOS Signage product. I think that webOS OSE does not have the VTG feature.
@mrsln
I have the same video performance issue, could you please explain how did you solve it?
@lemketron I'm happy to help. I don't remember the specifics but you have to stream the video (which can be accomplished on the client side) in a right format. Here's a working example.
First you need to encode the video in right way. Here's ffmpeg command to acomplish that:
ffmpeg.exe -i input_file -movflags empty_moov+omit_tfhd_offset+frag_keyframe+default_base_moof+isml -c:a aac output_file
and then play it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<style>
* {
margin: 0;
padding: 0;
}
video {
width: 100%;
height: 100%;
}
</style>
<body>
<video muted></video>
<script>
var video = document.querySelector('video');
var assetURL = './bmw22.mp4';
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen (_) {
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
mediaSource.endOfStream();
video.play();
});
sourceBuffer.appendBuffer(buf);
});
};
function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};
</script>
</body>
</html>
Hope it helps!
@mrsln
Using your approach, I see only a very slight stutter on my RP3, it's much better than before.
Thanks a lot!
The HTML5 video tag seems to work just fine on a Raspberry Pi 4 and the latest 2.1.0 build. Great work!