Sur d’autres sites (6805)

• HTML5 video player doesn't work on iPad/iPhone

  16 avril 2015, par Avrohom Yisroel

  NOTE This turned out to be a simulator problem, not a video encoding problem, see my edit lower down...

  I’m creating a web site for a local college, and they want to be able to add short videos that people can view online. I’ve spent quite a bit of time trying to work out how to get the videos to play on iDevices, but have failed.

  I’m using Video.js (http://www.videojs.com), and have HTML that looks like this...

  <video class="video-js vjs-default-skin" controls="controls" preload="auto" width="640" height="352" poster="/Content/Images/logobg.png" data-setup="{}">
  
    <source src="/Content/Videos/video.m4v" type="video/mp4">
  
    <source src="/Content/Videos/video.webm" type="video/webm">
  
    <p class="vjs-no-js">
  
      To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  
    </p>
  
  </source></source></video>

  This works fine on desktop browsers, where it uses the m4v file. However, if I load the page on an iDevice, the video player says "no compatible source was found for this video", which sounds like it doesn’t like either the m4v or the webm file.

  I created the webm file using instructions found at http://daniemon.com/blog/how-to-convert-videos-to-webm-with-ffmpeg/. I tried creating a .mov file using the accepted answer at iPad Doesn’t Render H.264 Video with HTML5, but this gave the same error.

  Anyone any ideas how I can support iDevices ? Please don’t blind me with science, I’m a real newbie with all this video stuff, and need simple instructions !

  Edit The problem I was having was when trying to view the site on a mobile simulator. When I uploaded the site to a real server, and tried it on an iPad, it worked fine. So, if anyone is having a similar problem, first use something like Handbrake to encode the videos, as it seems to do it fine, then make sure you’re testing on a real mobile device, not a simulator !

• converting images to mp4 using ffmpeg on iphone

  29 novembre 2011, par user633901

  Up till now, i can create mpeg1 but with no luck for mp4.Maybe we can talk and share information.Someone told me that i have to set some flags for using mp4.But i am stuck at using it...

  following is the working code :

  av_register_all();
  
  printf("Video encoding\n"); 
  
  
  
  /// find the mpeg video encoder 
  
  //codec=avcodec_find_encoder(CODEC_ID_MPEG1VIDEO); 
  
  codec = avcodec_find_encoder(CODEC_ID_MPEG4); 
  
  
  
  if (!codec) { 
  
      fprintf(stderr, "codec not found\n"); 
  
      exit(1); 
  
  } 
  
  
  
  c = avcodec_alloc_context(); 
  
  picture = avcodec_alloc_frame(); 
  
  
  
  // put sample parameters 
  
  c->bit_rate = 400000;
  
  /// resolution must be a multiple of two 
  
  c->width = 240; 
  
  c->height = 320; 
  
  //c->codec_id = fmt->video_codec;
  
  //frames per second 
  
  c->time_base= (AVRational){1,25}; 
  
  c->gop_size = 10; /// emit one intra frame every ten frames 
  
  c->max_b_frames=1; 
  
  c->pix_fmt =PIX_FMT_YUV420P; // PIX_FMT_YUV420P
  
  
  
  if (avcodec_open(c, codec) < 0) { 
  
      fprintf(stderr, "could not open codec\n"); 
  
      exit(1); 
  
  }
  
  
  
  f = fopen([[NSHomeDirectory() stringByAppendingPathComponent:@"test.mp4"] UTF8String], "wb"); 
  
  
  
  if (!f) { 
  
      fprintf(stderr, "could not open %s\n",[@"test.mp4" UTF8String]); 
  
      exit(1); 
  
  } 
  
  
  
  // alloc image and output buffer 
  
  outbuf_size = 100000; 
  
  outbuf = malloc(outbuf_size); 
  
  size = c->width * c->height; 
  
  
  
  #pragma mark - 
  
  
  
  AVFrame* outpic = avcodec_alloc_frame(); 
  
  int nbytes = avpicture_get_size(PIX_FMT_YUV420P, c->width, c->height); //this is half size of numbytes. 
  
  
  
  //create buffer for the output image 
  
  uint8_t* outbuffer = (uint8_t*)av_malloc(nbytes); 
  
  
  
  #pragma mark -  
  
  for(k=0;k<1;k++) { 
  
      for(i=0;i<25;i++) { 
  
          fflush(stdout); 
  
  
  
          int numBytes = avpicture_get_size(PIX_FMT_RGBA, c->width, c->height); 
  
          uint8_t *buffer = (uint8_t *)av_malloc(numBytes*sizeof(uint8_t)); 
  
  
  
          UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.png", i+1]]; 
  
          CGImageRef newCgImage = [image CGImage]; 
  
  
  
          CGDataProviderRef dataProvider = CGImageGetDataProvider(newCgImage); 
  
          CFDataRef bitmapData = CGDataProviderCopyData(dataProvider); 
  
          buffer = (uint8_t *)CFDataGetBytePtr(bitmapData);   
  
          /////////////////////////// 
  
          //outbuffer=(uint8_t *)CFDataGetBytePtr(bitmapData); 
  
          ////////////////////////// 
  
          avpicture_fill((AVPicture*)picture, buffer, PIX_FMT_RGBA, c->width, c->height); 
  
          avpicture_fill((AVPicture*)outpic, outbuffer, PIX_FMT_YUV420P, c->width, c->height);//does not have image data. 
  
  
  
          struct SwsContext* fooContext = sws_getContext(c->width, c->height, 
  
                                                        PIX_FMT_RGBA, 
  
                                                        c->width, c->height, 
  
                                                        PIX_FMT_YUV420P, 
  
                                                        SWS_FAST_BILINEAR, NULL, NULL, NULL); 
  
  
  
          //perform the conversion 
  
          sws_scale(fooContext, picture->data, picture->linesize, 0, c->height, outpic->data, outpic->linesize); 
  
          // Here is where I try to convert to YUV 
  
  
  
          // encode the image 
  
          out_size = avcodec_encode_video(c, outbuf, outbuf_size, outpic); 
  
          printf("encoding frame %3d (size=%5d)\n", i, out_size); 
  
          fwrite(outbuf, 1, out_size, f); 
  
  
  
          free(buffer); 
  
          buffer = NULL;
  
      }
  
  
  
      // get the delayed frames 
  
      for(; out_size; i++) { 
  
          fflush(stdout); 
  
  
  
          out_size = avcodec_encode_video(c, outbuf, outbuf_size, NULL); 
  
          printf("write frame %3d (size=%5d)\n", i, out_size); 
  
          fwrite(outbuf, 1, outbuf_size, f);       
  
      } 
  
  }
  
  
  
  // add sequence end code to have a real mpeg file 
  
  outbuf[0] = 0x00; 
  
  outbuf[1] = 0x00; 
  
  outbuf[2] = 0x01; 
  
  outbuf[3] = 0xb7; 
  
  fwrite(outbuf, 1, 4, f); 
  
  fclose(f); 
  
  free(picture_buf);
  
  free(outbuf); 
  
  
  
  avcodec_close(c); 
  
  av_free(c); 
  
  av_free(picture); 
  
  //av_free(outpic); 
  
  printf("\n"); 

  my msn:hieeli@hotmail.com

• 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.