HTML5 video won t play in Chrome only

Question

some background I ve tested my video in FF and Safari  including iDevices  and it plays properly  but it will not play in the Chrome browser  As you can see in the code below  I ve created mp4  m4v  webM  and ogv files  and I ve tested all of them on my computer for any playback issues  the symptoms issue In Chrome  the video seems to load  and there are no errors in the console log  When the play button is pressed  it loads a portion of the file  but then does not play it  Yet  interestingly  if I arbitrarily click on a later time in the time-bar  say about halfway through  it will play about 5 seconds of the video even with the subtitles  but no audio  my research I ve read up on any issues that might be causing this  but I haven t found any ideas that work  To note  I ve written the following in my  htaccess file    ----------------------------------------------------------------------   Proper MIME type for all files   ----------------------------------------------------------------------    Audio AddType audio ogg                      oga ogg AddType audio mp4                      m4a AddType audio webm                     webm    Video AddType video ogg                      ogv AddType video mp4                      mp4 m4v AddType video webm                     webm    Assorted types AddType image x-icon                        ico AddType image webp                          webp AddType text cache-manifest                 appcache manifest AddType text x-component                    htc AddType application x-chrome-extension      crx AddType application x-opera-extension       oex AddType application x-xpinstall             xpi AddType application octet-stream            safariextz AddType application x-web-app-manifest json webapp AddType text x-vcard                        vcf AddType text plain                          srt  Also  I am using the mediaelement js library  the code Here s the HTML   lt video width  quot 100  quot  height  quot 400 quot  poster  quot assets img myVideo jpg quot  controls  quot controls quot  preload  quot none quot  gt         lt  -- M4V for Apple -- gt         lt source type  quot video mp4 quot  src  quot assets vid PhysicsEtoys m4v quot    gt         lt  -- MP4 for Safari  IE9  iPhone  iPad  Android  and Windows Phone 7 -- gt         lt source type  quot video mp4 quot  src  quot assets vid PhysicsEtoys mp4 quot    gt         lt  -- WebM VP8 for Firefox4  Opera  and Chrome -- gt         lt source type  quot video webm quot  src  quot assets vid PhysicsEtoys webm quot    gt         lt  -- Ogg Vorbis for older Firefox and Opera versions -- gt         lt source type  quot video ogg quot  src  quot assets vid PhysicsEtoys ogv quot    gt         lt  -- Subtitles -- gt         lt track kind  quot subtitles quot  src  quot assets vid subtitles srt quot  srclang  quot en quot    gt         lt track kind  quot subtitles quot  src  quot assets vid subtitles vtt quot  srclang  quot en quot    gt         lt  -- Flash fallback for non-HTML5 browsers without JavaScript -- gt         lt object width  quot 100  quot  height  quot 400 quot  type  quot application x-shockwave-flash quot  data  quot flashmediaelement swf quot  gt             lt param name  quot movie quot  value  quot flashmediaelement swf quot    gt             lt param name  quot flashvars quot  value  quot controls true amp file assets vid PhysicsEtoys mp4 quot    gt             lt  -- Image as a last resort -- gt             lt img src  quot assets img myVideo jpg quot  width  quot 320 quot  height  quot 240 quot  title  quot No video playback capabilities quot    gt         lt  object gt   lt  video gt   Here s the simple js     video audio   mediaelementplayer       features    playpause   progress   current   tracks   volume        startLanguage   en       Any ideas  Thanks for any and all help in this matter

User · Accepted Answer

With some help from another person  we figured out it was an issue of ordering the  source files within the HTML file  I learned that browsers accept the first usable format  and their seems to be an issue with the  m4v file  so I started with the  mp4  then  webm  Here s the order that works in Safari  even on my iPhone 5   Firefox  and Chrome    lt video width  100   height  400  poster  assets img myVideo jpg  controls  controls  preload  none  gt         lt  -- MP4 for Safari  IE9  iPhone  iPad  Android  and Windows Phone 7 -- gt         lt source type  video mp4  src  assets vid PhysicsEtoys mp4    gt         lt  -- WebM VP8 for Firefox4  Opera  and Chrome -- gt         lt source type  video webm  src  assets vid PhysicsEtoys webm    gt          lt  -- M4V for Apple -- gt         lt source type  video mp4  src  assets vid PhysicsEtoys m4v    gt         lt  -- Ogg Vorbis for older Firefox and Opera versions -- gt         lt source type  video ogg  src  assets vid PhysicsEtoys ogv    gt         lt  -- Subtitles -- gt         lt track kind  subtitles  src  assets vid subtitles srt  srclang  en    gt         lt track kind  subtitles  src  assets vid subtitles vtt  srclang  en    gt         lt  -- Flash fallback for non-HTML5 browsers without JavaScript -- gt         lt object width  100   height  400  type  application x-shockwave-flash  data  flashmediaelement swf  gt             lt param name  movie  value  flashmediaelement swf    gt             lt param name  flashvars  value  controls true amp file assets vid PhysicsEtoys mp4    gt             lt  -- Image as a last resort -- gt             lt img src  assets img myVideo jpg  width  320  height  240  title  No video playback capabilities    gt         lt  object gt     lt  video gt    Now  I ll have to re-check the encoding on the m4v file  perhaps an issue of Baseline vs Main  High  etc

User · Answer

Have you tried by setting the MIME type of your  m4v to  video m4v  or  video x-m4v     Browsers might use the canPlayType method internally to check if a  lt source gt  is candidate to playback   In Chrome  I have these results   document createElement  video   canPlayType  video mp4        maybe  document createElement  video   canPlayType  video m4v          document createElement  video   canPlayType  video x-m4v        maybe

User · Answer

I had a similar issue  no videos would play in Chrome  Tried installing beta 64bit  going back to Chrome 32bit release    The only thing that worked for me was updating my video drivers    I have the NVIDIA GTS 240  Downloaded  installed the drivers and restarted and Chrome 38 0 2125 77 beta-m  64-bit  starting playing HTML5 videos again on youtube  vimeo and others  Hope this helps anyone else

User · Answer

Try this   lt video autoplay loop id  video-background  muted plays-inline gt               lt source src  https   player vimeo com external 158148793 hd mp4 s 8e8741dbee251d5c35a759718d4b0976fbf38b6f amp profile id 119 amp oauth2 token id 57447761  type  video mp4  gt               lt  video gt    Thanks

User · Answer

To all of you who got here and did not found the right solution  i found out that the mp4 video needs to fit a specific format   My Problem was that i got an 1920x1080 video which wont load under Chrome  under Firefox it worked like a charm   After hours of searching i finaly managed to get hang of the problem  the first few streams where 1912x1088 so Chrome wont play it   i got the exact stream size from the tool MediaInfo   So to fix it i just resized it to 1920x1080 and it worked

[html] HTML5 video won't play in Chrome only

Examples related to html

Examples related to google-chrome

Examples related to html5-video

Examples related to mediaelement.js