CODEWITHSUNDEEP
html
LeSam
LeSam

Reputation: 1265

Chrome jerky video html

I have a video playing on my website It's work on every browser I've tested except for Google Chrome.

The video plays but it's really jerky.

How can I fix that problem, it's stuck sometimes, then play, then stuck, etc.

This is my code 

<video autoplay="autoplay" loop="loop" preload="auto" muted="muted" poster="images/backscreen.jpg" width="640" height="360">
    <source src="videos/footage_test.mp4" type="video/mp4" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <img alt="Backscreen" src="images/backscreen.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>

Upvotes: 0

Views: 1973

Answers (2)

Daniel Landers
Daniel Landers

Reputation: 21

I came across the same issue and found it could be resolved by setting Cache-Control, ETag and Expires response headers for the video source URL.

You probably also want to set Content-Range, Accept-Ranges, Content-Length and Content-Type also if you aren't already doing so.

This is how you might achieve this with nodejs

fs.stat(path, function(err, stat) {
  if (err) Error(err);
  var positions = req.headers.range.replace(/bytes=/, "").split("-");
  var start = parseInt(positions[0], 10);
  var total = stat.size;
  var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
  var chunksize = (end - start) + 1;
  res.writeHead(206, {
    'Content-Range': 'bytes ' + start + '-' + end + '/' + total,
    'Accept-Ranges': 'bytes',
    'Content-Length': chunksize,
    'Content-Type': 'video/mp4',
    'Cache-Control': 'public, max-age=2592000',
    'ETag': stat.md5Hash,
    'Expires': new Date(Date.now() + 2592000000).toUTCString(),
  });
  // Send file stream
  sendStream(path, start, end);
});

Upvotes: 0

Brad
Brad

Reputation: 163234

There really isn't anything you can do about this. Your description doesn't have enough specific information to determine the exact cause, but it is likely one of these:

  1. You don't have enough bandwidth to support streaming video (either on the client end, or server end)
  2. The codec being used for playback is different in Chrome vs other browsers. You're using Flowplayer, so it's possible that HTML 5 is used in Chrome and Flash is used in other browsers, leaving to all sorts of implementation differences, including codec choice. (One may utilize a hardware codec for example.)

Upvotes: 1

Related Questions