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:
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With