安装:我通过npm使用medialementjs(v4.2),安装作为文档中提到的React组件的一部分完成。它运行在KAIOS 2.5上,我认为它的行为应类似于Firefox 48.0。 我遇到的问题是,我看到很多呼叫都失败,并显示HTTP状态代码416。深入研究失败的呼叫后,我发现这些呼叫的字节范围大于音频的内容长度(根据先前的HTTP请求确定)文件。我找不到发生这种情况的任何原因。
添加416方案的请求/响应详细信息,主机和文件名将替换为虚拟变量:
GET /473/abc.mp4 HTTP/1.1
Host abc.def.com
User-Agent Mozilla/5.0 (Mobile; LYF/F271i/LYF_F271i-000-02-05-050319_i; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5
Accept audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
Accept-Language en-US,en;q=0.5
Range bytes=0-
Connection keep-alive
HTTP/1.1 206 Partial Content
Content-Type audio/mp4
**Content-Length 1638597**
Connection keep-alive
Last-Modified Tue, 05 Nov 2019 01:05:43 GMT
Accept-Ranges bytes
Server AmazonS3
Date Fri, 03 Jan 2020 04:01:26 GMT
ETag "078ee816a6a21c3764601e034781abd-1"
Content-Range bytes 0-1638596/1638597
X-Cache Hit from cloudfront
Via 1.1 57a7a97927e18893c09f2a95e57175ae.cloudfront.net (CloudFront)
X-Amz-Cf-Pop BOM51-C2
X-Amz-Cf-Id OYbRuU55Cp5BGaMw2yNzmQNvf6gZJF0RsS24j8aDPmwkuxJbjqcy1w==
Age 57772
GET /473/abc.mp4 HTTP/1.1
Host abc.def.com
User-Agent Mozilla/5.0 (Mobile; LYF/F271i/LYF_F271i-000-02-05-050319_i; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5
Accept audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
Accept-Language en-US,en;q=0.5
Range bytes=160728-
Connection keep-alive
HTTP/1.1 206 Partial Content
Content-Type audio/mp4
Content-Length 1477869
Connection keep-alive
Last-Modified Tue, 05 Nov 2019 01:05:43 GMT
Accept-Ranges bytes
Server AmazonS3
Date Fri, 03 Jan 2020 04:01:26 GMT
ETag "078ee816a6a21c3764601e034781abd-1"
Content-Range bytes 160728-1638596/1638597
X-Cache Hit from cloudfront
Via 1.1 2606bc577d5e46e4fb5a12cdb996e3f0.cloudfront.net (CloudFront)
X-Amz-Cf-Pop BOM51-C2
X-Amz-Cf-Id BWUJe9Dn-cFC2ugRSwaWNw-3qAYlO2g7fPe6FocxBxKpwl-ly0Z8rg==
Age 57773
FAILING REQUEST, check the byte range:
GET /473/abc.mp4 HTTP/1.1
Host abc.def.com
User-Agent Mozilla/5.0 (Mobile; LYF/F271i/LYF_F271i-000-02-05-050319_i; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5
Accept audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
Accept-Language en-US,en;q=0.5
**Range bytes=1638597-**
Connection keep-alive
HTTP/1.1 416 Requested Range Not Satisfiable
Content-Type text/html
Content-Length 49
Connection keep-alive
Server CloudFront
Date Fri, 03 Jan 2020 20:07:16 GMT
Expires Fri, 03 Jan 2020 20:07:16 GMT
X-Cache Error from cloudfront
Via 1.1 80770456312ba85426e0f3af4e996bbd.cloudfront.net (CloudFront)
X-Amz-Cf-Pop BOM51-C2
X-Amz-Cf-Id BMvpfJQMZ0lG8R8_bLhonFSPwu5e79cpzFhuROPdB-RsBwn4gsHDgg
Adding info (running afinfo) about the file being played:
File type ID: mp4f
Num Tracks: 1
----
Data format: 2 ch, 22050 Hz, 'aac ' (0x00000000) 0 bits/channel, 0 bytes/packet, 1024 frames/packet, 0 bytes/frame
no channel layout.
estimated duration: 256.677959 sec
audio bytes: 1557304
audio packets: 5529
bit rate: 48520 bits per second
packet size upper bound: 728
maximum packet size: 728
audio data file offset: 22939
optimized
audio 5659749 valid frames + 1024 priming + 923 remainder = 5661696
format list:
[ 0] format: 2 ch, 22050 Hz, 'aac ' (0x00000000) 0 bits/channel, 0 bytes/packet, 1024 frames/packet, 0 bytes/frame
Channel layout: Stereo (L R)
----
播放网址的代码:
mediaelementJsInstance.setSrc(src);
//mediaelementJsInstance.load(); // I have tried both with and without load and it does not have an effect.
mediaelementJsInstance.play();
我的问题是:
a)我如何播放src或中介元素设置
b)我应该使用相同的CDN来查看CDN,而其他客户端(android / ios)不会遇到相同的问题