Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embedded local mp4 not playing in Chrome when running jekyll serve (ECONNRESET)

I'm working on a simple jekyll site, and am wanting to embed a video (locally-stored mp4 - not youtube/streaming service) in a markdown file.

I'm just using the basic tag:

<video width="600" controls="controls">
  <source src="{{ site.my-media-path }}/myvideo.mp4">
</video>

When I run jekyll serve and access my page locally, it works perfectly in Firefox, while in Chrome, it either just shows the thumbnail (and breaks after a few milliseconds of play), or shows empty controls.

With Chrome, jekyll spits out the following error on the server side:

[2018-02-19 17:57:34] ERROR Errno::ECONNRESET: Connection reset by peer @ io_fillbuf - fd:11 
    /home/(((my_login)))/.rbenv/versions/2.2.3/lib/ruby/2.2.0/webrick/httpserver.rb:80:in `eof?'
    /home/(((my_login)))/.rbenv/versions/2.2.3/lib/ruby/2.2.0/webrick/httpserver.rb:80:in `run'
    /home/(((my_login)))/.rbenv/versions/2.2.3/lib/ruby/2.2.0/webrick/server.rb:294:in `block in start_thread'

No such errors on Firefox.

If I go to page source and hit the video link directly in chrome (instead of through the page), same thing happens. (note: I know the path is correct, because I can save/download it just fine)

If I just drag the video into to my browser from hard disk directly, it works fine, so it knows how to play it.

Embedding a youtube video through their iframe link works fine.

Things I've tried:

  • Disabling hardware acceleration in Chrome settings
  • Clearing browsing history/cache (some sites seem to recommend that for embedded videos not playing)
  • Converting the video to webm using kdenlive, and trying to use that instead).
like image 775
user2671688 Avatar asked Feb 20 '18 02:02

user2671688


1 Answers

I have had this issue myself recently. I have been able to consistently get the videos to play correctly in Chrome by ensuring the video was embedded with the muted attribute. For example:

<video muted autoplay controls>
    <source src="{{ site.my-media-path }}/myvideo.mp4" type="video/mp4">
</video>

I believe this is necessary due to changes in the way Chrome handles autoplaying content with audio.

https://googlechrome.github.io/samples/muted-autoplay/

like image 86
jbrownwrld Avatar answered Nov 10 '22 04:11

jbrownwrld