使用HTML5标签播放视频 [英] Playing videos using HTML5 Tag
本文介绍了使用HTML5标签播放视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个网站，视频需要进行流式处理。内容创建者上传.mov文件到服务器。在上载时，我转换为使用FFMPEG，.MP4，.webm和.OGG以下格式。
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.
我现在想，让视频从多个浏览器和手持设备上查看。在code是如下：
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>
中的视频作品在所有浏览器。但是，它拒绝对Android的播放。当我点击播放按钮，它显示为只加载。
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.
我正在测试4.0.3。
I am testing on 4.0.3.
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);
有关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.
推荐答案
这是工作。在原岗位的编辑是最后！希望它可以帮助别人谁可能有类似的问题。只是检查是否已在服务器设置任何身份验证，如果它不能正常工作第一位。 ：）
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. :)
这篇关于使用HTML5标签播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
