Sur d’autres sites (6381)

• How to play mp4 video file with HTML5 video tag on iOS (iPhone and iPad) ?

  22 avril 2015, par Mokielas

  I want to display HTML5 video to my users using the video tag. For Firefox, Chrome and Opera WEBM works as expected. In Safari on Windows and Mac my MP4 version works, too. The only problem I’m experiencing is, that it won’t play on iPad and iPhone (Safari of course).

  Create video

  The MP4 (h.264 + acc-lc) is converted like this (with profile : baseline and level 3.0 for maximum compatibility with iOS) :

  • Stream #0:0(eng) : Video : h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 640x352, 198 kb/s, 17 fps, 17 tbr, 17408 tbn, 34 tbc (default)
  • Stream #0:1(eng) : Audio : aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 56 kb/s (default)

  Edit : Whole ffprobe output (slight changes in bitrate etc. to the above mentioned) :

  Metadata:
  
  major_brand     : isom
  
  minor_version   : 512
  
  compatible_brands: isomiso2avc1mp41
  
  encoder         : Lavf56.30.100
  
  Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s
  
  Stream #0:0(eng): Video: h264 (Constrained Baseline) 
  
  (avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
  
  12800 tbn, 50 tbc (default)
  
  Metadata:
  
    handler_name    : VideoHandler
  
  Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, 
  
  stereo, fltp, 85 kb/s (default)
  
  Metadata:
  
    handler_name    : SoundHandler

  I found various requirements for iOS devices like this and this, also someone mentioned to add the yuv420p pixel format when converting.

  In fact the ffmpeg cmd looks like this :

  ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4

  Display video

  With Modernizr I detect which format is "supported" and add it to the src or the video tag. Last thing is adding the right MIME type. For mp4 I add type="video/mp4". The full code for the video tag is :

  <video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"></video>

  I tried various ways : own implementation with own interface, controls and stuff from browser vendors and video.js just to check whether i’m too studip for this. All work in the environments listed above except for iPhone and iPad.

  I read this article on Video on the web, especially this part and only serve the "right" file with the "right" type without a posterattribute set.

  My Apache has

  AddType video/mp4                      mp4 m4v f4v f4p
  
  AddType video/ogg                      ogv
  
  AddType video/webm                     webm

  And byte-ranges are enabled. This is needed to get partial content from the server.

  Has anyone a clue what’s going on there ? Thanks in advance !

  Edit : Safari and Chrome both throw MEDIA_ERR_SRC_NOT_SUPPORTED Error on iPad. There must be an issue with the encoding.

• Video won't play on iphone

  18 octobre 2016, par Merc

  I have an app that places videos online, and cannot find a way to get iPhones to actually play them.

  ffprobe says :

    merc@mercs-thinkpad:/disk/home/merc/Downloads$ ffprobe 5801005ff1861ba1729757fbffprobe version 2.8.8-0ubuntu0.16.04.1 Copyright (c) 2007-2016 the FFmpeg developers
  
      built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.2) 20160609
  
      configuration: --prefix=/usr --extra-version=0ubuntu0.16.04.1 --build-suffix=-ffmpeg --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --cc=cc --cxx=g++ --enable-gpl --enable-shared --disable-stripping --disable-decoder=libopenjpeg --disable-decoder=libschroedinger --enable-avresample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libmodplug --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librtmp --enable-libschroedinger --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxvid --enable-libzvbi --enable-openal --enable-opengl --enable-x11grab --enable-libdc1394 --enable-libiec61883 --enable-libzmq --enable-frei0r --enable-libx264 --enable-libopencv
  
      WARNING: library configuration mismatch
  
      avcodec     configuration: --prefix=/usr --extra-version=0ubuntu0.16.04.1 --build-suffix=-ffmpeg --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --cc=cc --cxx=g++ --enable-gpl --enable-shared --disable-stripping --disable-decoder=libopenjpeg --disable-decoder=libschroedinger --enable-avresample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libmodplug --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librtmp --enable-libschroedinger --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxvid --enable-libzvbi --enable-openal --enable-opengl --enable-x11grab --enable-libdc1394 --enable-libiec61883 --enable-libzmq --enable-frei0r --enable-libx264 --enable-libopencv --enable-version3 --disable-doc --disable-programs --disable-avdevice --disable-avfilter --disable-avformat --disable-avresample --disable-postproc --disable-swscale --enable-libopencore_amrnb --enable-libopencore_amrwb --enable-libvo_aacenc --enable-libvo_amrwbenc
  
      libavutil      54. 31.100 / 54. 31.100
  
      libavcodec     56. 60.100 / 56. 60.100
  
      libavformat    56. 40.101 / 56. 40.101
  
      libavdevice    56.  4.100 / 56.  4.100
  
      libavfilter     5. 40.101 /  5. 40.101
  
      libavresample   2.  1.  0 /  2.  1.  0
  
      libswscale      3.  1.101 /  3.  1.101
  
      libswresample   1.  2.101 /  1.  2.101
  
      libpostproc    53.  3.100 / 53.  3.100
  
    Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '5801005ff1861ba1729757fb':
  
      Metadata:
  
        major_brand     : isom
  
        minor_version   : 512
  
        compatible_brands: isomiso2avc1mp41
  
        encoder         : Lavf57.50.100
  
      Duration: 00:00:12.37, start: 0.021333, bitrate: 993 kb/s
  
        Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1280x720 [SAR 1:1 DAR 16:9], 928 kb/s, 29.83 fps, 29.83 tbr, 11456 tbn, 59.67 tbc (default)
  
        Metadata:
  
          handler_name    : VideoHandler
  
        Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, mono, fltp, 70 kb/s (default)
  
        Metadata:
  
          handler_name    : SoundHandler

  The video is here

  The file was created using ffmpeg from within the app.

  Is this a codec problem ? What shall I do to make sure iPhones can actually play them ?

• How to embed mp4 video into my html5 website

  1er septembre 2015, par Peter London

  I have been trying to embed my mp4 video into html5 I am using chrome
  I have tried this —>> can see video player but no movie

  <code class="echappe-js">&lt;script src=&quot;//api.html5media.info/1.1.8/html5media.min.js&quot;&gt;&lt;/script&gt;
  
  

  tried this too ,,could see video player but no movie I am using chrome

  <video width="320" height="240" controls="controls">
  
    <source src="movie.mp4" type="video/mp4">
  
  Your browser does not support the video tag.
  
  </source></video>

  can anyone help