Playing videos using HTML5 Tag

2019-02-11 05:32发布

站内问答 / Android
784 1 5

I am creating a website where videos need to be streamed. The content creator uploads .mov file to the server. Upon uploading, I convert to the following formats using FFMPEG, .mp4, .webm, and .ogg.

I am now trying to allow the video to be viewed from multiple browsers and handheld devices. The code is as follow:

<head>

<script> 
var video = document.getElementById('video');
video.addEventListener('click',function(){
 video.play();
 },false);
</script>

<script type="text/javascript" src="jwplayer.js"></script>

</head>
<body>
<video id="video" autobuffer height="240" width="360" controls>
  <source src="output.mp4">
  <source src="output.ogv" type="video/ogg">
  <source src="output.webm" type="video/webm">
</video>

<script type="text/javascript">
  jwplayer("video").setup({
    modes: [
       { type: 'html5' },
       { type: 'flash', src: 'player.swf' }
    ]
  });
</script>

</body>

The video works on all browsers. But, it is refusing to play on Android. When I click the play button, it shows as loading only.

I am testing on 4.0.3.

FFMPEG conversion codes:

webm

exec("ffmpeg -y -i file.mov -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k -s 640x360 output.webm", $command_output, $result);

ogg

exec("ffmpeg -y -i file.mov -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k -s 640x360 output.ogv", $command_output, $result);

flv

exec("ffmpeg -y -i file.mov -ar 44100 -ab 96 -f flv output.flv", $command_output, $result);

For MP4:

    sudo ffmpeg -i file.mov -s 320x240 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -preset slow -acodec aac -strict experimental -ac 2 -r 15 -ab 44100 -aspect 16:9 output.mp4
ffmpeg version git-2012-10-11-492b8ec Copyright (c) 2000-2012 the FFmpeg developers
  built on Oct 11 2012 19:59:50 with gcc 4.6 (Ubuntu/Linaro 4.6.3-1ubuntu5)
  configuration: --enable-gpl --enable-libfaac --enable-libfdk-aac --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-librtmp --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-nonfree --enable-version3
  libavutil      51. 74.100 / 51. 74.100
  libavcodec     54. 65.100 / 54. 65.100
  libavformat    54. 31.100 / 54. 31.100
  libavdevice    54.  3.100 / 54.  3.100
  libavfilter     3. 19.102 /  3. 19.102
  libswscale      2.  1.101 /  2.  1.101
  libswresample   0. 16.100 /  0. 16.100
  libpostproc    52.  1.100 / 52.  1.100
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x23f3220] Stream #1: not enough frames to estimate rate; consider increasing probesize
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x23f3220] Stream #2: not enough frames to estimate rate; consider increasing probesize
Guessed Channel Layout for  Input Stream #0.1 : stereo
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'file.mov':
  Metadata:
    major_brand     : qt  
    minor_version   : 537199360
    compatible_brands: qt  
    creation_time   : 2012-09-07 11:10:10
  Duration: 00:01:41.83, start: 0.000000, bitrate: 186917 kb/s
    Stream #0:0(eng): Video: qtrle (rle  / 0x20656C72), rgb24, 1920x1080, 185371 kb/s, SAR 1920:1920 DAR 16:9, 29.97 fps, 29.97 tbr, 30k tbn, 30k tbc
    Metadata:
      creation_time   : 2012-09-07 11:10:10
      handler_name    : Apple Alias Data Handler
      timecode        : 00:00:00;03
    Stream #0:1(eng): Audio: pcm_s16le (sowt / 0x74776F73), 48000 Hz, stereo, s16, 1536 kb/s
    Metadata:
      creation_time   : 2012-09-07 11:10:10
      handler_name    : Apple Alias Data Handler
      timecode        : 00:00:00;03
    Stream #0:2(eng): Data: none (tmcd / 0x64636D74)
    Metadata:
      creation_time   : 2012-09-07 11:31:37
      handler_name    : Apple Alias Data Handler
      timecode        : 00:00:00;03
File 'output.mp4' already exists. Overwrite ? [y/N] y
using SAR=4/3
[libx264 @ 0x240bf60] using cpu capabilities: MMX2 SSE2Fast SSSE3 FastShuffle SSE4.2 AVX
[libx264 @ 0x240bf60] profile Constrained Baseline, level 1.2
[libx264 @ 0x240bf60] 264 - core 128 r2 198a7ea - H.264/MPEG-4 AVC codec - Copyleft 2003-2012 - http://www.videolan.org/x264.html - options: cabac=0 ref=5 deblock=1:0:0 analyse=0x1:0x111 me=umh subme=8 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=0 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=-2 threads=1 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=0 weightp=0 keyint=250 keyint_min=15 scenecut=40 intra_refresh=0 rc_lookahead=50 rc=crf mbtree=1 crf=23.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
Output #0, mp4, to 'output.mp4':
  Metadata:
    major_brand     : qt  
    minor_version   : 537199360
    compatible_brands: qt  
    encoder         : Lavf54.31.100
    Stream #0:0(eng): Video: h264 ([33][0][0][0] / 0x0021), yuv420p, 320x240 [SAR 4:3 DAR 16:9], q=-1--1, 15360 tbn, 15 tbc
    Metadata:
      creation_time   : 2012-09-07 11:10:10
      handler_name    : Apple Alias Data Handler
      timecode        : 00:00:00;03
    Stream #0:1(eng): Audio: aac ([64][0][0][0] / 0x0040), 48000 Hz, stereo, fltp, 44 kb/s
    Metadata:
      creation_time   : 2012-09-07 11:10:10
      handler_name    : Apple Alias Data Handler
      timecode        : 00:00:00;03
Stream mapping:
  Stream #0:0 -> #0:0 (qtrle -> libx264)
  Stream #0:1 -> #0:1 (pcm_s16le -> aac)
Press [q] to stop, [?] for help
frame=   25 fps=0.0 q=0.0 size=       0kB time=00:00:01.32 bitrate=   0.frame=   47 fps= 47 q=0.0 size=       0kB time=00:00:02.68 bitrate=   0.frame=   67 fps= 44 q=27.0 size=      12kB time=00:00:04.05 bitrate=  23frame=   88 fps= 44 q=27.0 size=      23kB time=00:00:05.41 bitrate=  34frame=  108 fps= 43 q=27.0 size=      35kB time=00:00:06.78 bitrate=  42frame=  128 fps= 42 q=27.0 size=      47kB time=00:00:08.14 bitrate=  47frame=  150 fps= 43 q=27.0 size=      64kB time=00:00:09.51 bitrate=  54frame=  172 fps= 43 q=27.0 size=      81kB time=00:00:10.88 bitrate=  61frame=  193 fps= 43 q=27.0 size=     106kB time=00:00:12.24 bitrate=  70frame=  214 fps= 42 q=27.0 size=     119kB time=00:00:13.61 bitrate=  71frame=  235 fps= 42 q=27.0 size=     127kB time=00:00:14.97 bitrate=  69frame=  254 fps= 42 q=27.0 size=     144kB time=00:00:16.34 bitrate=  72frame=  272 fps= 41 q=27.0 size=     157kB time=00:00:17.70 bitrate=  72frame=  289 fps= 41 q=27.0 size=     174kB time=00:00:19.07 bitrate=  74frame=  309 fps= 41 q=27.0 size=     183kB time=00:00:20.28 bitrate=  73frame=  329 fps= 41 q=27.0 size=     191kB time=00:00:20.77 bitrate=  75frame=  349 fps= 41 q=27.0 size=     200kB time=00:00:22.08 bitrate=  74frame=  369 fps= 41 q=27.0 size=     215kB time=00:00:23.38 bitrate=  75frame=  389 fps= 41 q=27.0 size=     225kB time=00:00:24.72 bitrate=  74frame=  408 fps= 40 q=27.0 size=     235kB time=00:00:26.02 bitrate=  74frame=  428 fps= 40 q=27.0 size=     247kB time=00:00:27.32 bitrate=  73frame=  448 fps= 40 q=27.0 size=     256kB time=00:00:28.65 bitrate=  73frame=  468 fps= 40 q=27.0 size=     264kB time=00:00:30.01 bitrate=  72frame=  489 fps= 40 q=27.0 size=     273kB time=00:00:31.38 bitrate=  71frame=  507 fps= 40 q=27.0 size=     299kB time=00:00:32.72 bitrate=  74frame=  527 fps= 40 q=27.0 size=     317kB time=00:00:34.09 bitrate=  76frame=  547 fps= 40 q=27.0 size=     336kB time=00:00:35.45 bitrate=  77frame=  565 fps= 40 q=27.0 size=     344kB time=00:00:36.82 bitrate=  76frame=  586 fps= 40 q=27.0 size=     352kB time=00:00:38.18 bitrate=  75frame=  607 fps= 40 q=27.0 size=     361kB time=00:00:39.55 bitrate=  74frame=  627 fps= 40 q=27.0 size=     370kB time=00:00:40.91 bitrate=  74frame=  647 fps= 40 q=27.0 size=     384kB time=00:00:42.28 bitrate=  74frame=  665 fps= 40 q=27.0 size=     408kB time=00:00:43.64 bitrate=  76frame=  684 fps= 40 q=27.0 size=     418kB time=00:00:45.01 bitrate=  76frame=  704 fps= 40 q=27.0 size=     427kB time=00:00:46.37 bitrate=  75frame=  721 fps= 40 q=27.0 size=     453kB time=00:00:47.74 bitrate=  77frame=  741 fps= 40 q=27.0 size=     463kB time=00:00:49.10 bitrate=  77frame=  761 fps= 40 q=27.0 size=     472kB time=00:00:50.47 bitrate=  76frame=  784 fps= 40 q=27.0 size=     481kB time=00:00:51.84 bitrate=  76frame=  804 fps= 40 q=27.0 size=     498kB time=00:00:53.20 bitrate=  76frame=  822 fps= 40 q=27.0 size=     518kB time=00:00:54.57 bitrate=  77frame=  843 fps= 40 q=27.0 size=     529kB time=00:00:55.93 bitrate=  77frame=  862 fps= 40 q=27.0 size=     547kB time=00:00:57.30 bitrate=  78frame=  882 fps= 40 q=27.0 size=     558kB time=00:00:58.13 bitrate=  78frame=  903 fps= 40 q=27.0 size=     568kB time=00:00:58.98 bitrate=  78frame=  923 fps= 40 q=27.0 size=     578kB time=00:01:00.35 bitrate=  78frame=  943 fps= 40 q=27.0 size=     588kB time=00:01:01.67 bitrate=  78frame=  964 fps= 40 q=27.0 size=     598kB time=00:01:03.06 bitrate=  77frame=  984 fps= 40 q=27.0 size=     607kB time=00:01:04.42 bitrate=  77frame= 1004 fps= 40 q=27.0 size=     626kB time=00:01:05.72 bitrate=  78frame= 1026 fps= 40 q=27.0 size=     638kB time=00:01:07.20 bitrate=  77frame= 1047 fps= 40 q=27.0 size=     655kB time=00:01:09.58 bitrate=  77frame= 1069 fps= 40 q=27.0 size=     670kB time=00:01:10.95 bitrate=  77frame= 1089 fps= 40 q=27.0 size=     691kB time=00:01:12.32 bitrate=  78frame= 1108 fps= 40 q=27.0 size=     710kB time=00:01:12.64 bitrate=  80frame= 1126 fps= 40 q=27.0 size=     731kB time=00:01:13.85 bitrate=  81frame= 1142 fps= 40 q=27.0 size=     759kB time=00:01:15.05 bitrate=  82frame= 1157 fps= 39 q=27.0 size=     787kB time=00:01:16.41 bitrate=  84frame= 1174 fps= 39 q=27.0 size=     796kB time=00:01:17.78 bitrate=  83frame= 1192 fps= 39 q=27.0 size=     806kB time=00:01:19.14 bitrate=  83frame= 1209 fps= 39 q=27.0 size=     821kB time=00:01:19.38 bitrate=  84frame= 1227 fps= 39 q=27.0 size=     831kB time=00:01:20.59 bitrate=  84frame= 1248 fps= 39 q=27.0 size=     840kB time=00:01:21.96 bitrate=  84frame= 1267 fps= 39 q=27.0 size=     848kB time=00:01:23.24 bitrate=  83frame= 1289 fps= 39 q=27.0 size=     857kB time=00:01:24.73 bitrate=  82frame= 1309 fps= 39 q=24.0 size=     877kB time=00:01:26.03 bitrate=  83frame= 1329 fps= 39 q=27.0 size=     892kB time=00:01:27.40 bitrate=  83frame= 1351 fps= 39 q=27.0 size=     901kB time=00:01:28.85 bitrate=  83frame= 1372 fps= 39 q=27.0 size=     912kB time=00:01:30.28 bitrate=  82frame= 1394 fps= 39 q=27.0 size=     925kB time=00:01:32.52 bitrate=  81frame= 1418 fps= 39 q=27.0 size=     936kB time=00:01:34.16 bitrate=  81frame= 1441 fps= 40 q=27.0 size=     947kB time=00:01:35.53 bitrate=  81frame= 1464 fps= 40 q=27.0 size=     957kB time=00:01:36.89 bitrate=  80frame= 1488 fps= 40 q=27.0 size=     969kB time=00:01:38.26 bitrate=  80frame= 1509 fps= 40 q=27.0 size=     981kB time=00:01:39.62 bitrate=  80frame= 1526 fps= 40 q=27.0 size=     993kB time=00:01:41.90 bitrate=  79frame= 1530 fps= 40 q=27.0 Lsize=    1038kB time=00:01:42.00 bitrate=  83.4kbits/s dup=0 drop=1522    
video:406kB audio:590kB subtitle:0 global headers:0kB muxing overhead 4.258083%
[libx264 @ 0x240bf60] frame I:15    Avg QP:16.30  size:  2928
[libx264 @ 0x240bf60] frame P:1515  Avg QP:22.12  size:   245
[libx264 @ 0x240bf60] mb I  I16..4: 72.9%  0.0% 27.1%
[libx264 @ 0x240bf60] mb P  I16..4:  3.9%  0.0%  0.7%  P16..4:  3.2%  1.1%  0.5%  0.0%  0.0%    skip:90.5%
[libx264 @ 0x240bf60] coded y,uvDC,uvAC intra: 12.1% 38.2% 14.8% inter: 1.2% 2.7% 0.9%
[libx264 @ 0x240bf60] i16 v,h,dc,p: 29% 23%  4% 44%
[libx264 @ 0x240bf60] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 19% 16% 30%  6%  8%  8%  5%  6%  3%
[libx264 @ 0x240bf60] i8c dc,h,v,p: 50% 27% 18%  5%
[libx264 @ 0x240bf60] ref P L0: 80.0%  8.9%  6.1%  2.7%  2.3%
[libx264 @ 0x240bf60] kb/s:32.58

I decided to remote debug to see what is happening. I realised that the video status is pending.

Debug

1条回答
我想做一个坏孩纸
2楼-- · 2019-02-11 06:15

It is working. The edits in the original post is the final! Hope it helps anyone else who might have similar problem. Just check if you have set any authentication in your server if it is not working first. :)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)