IOS 全屏上的 jwplayer 字幕,带有动态生成的字幕文件
jwpayer captions on IOS fullscreen with dynamically generated captions file
问题 : 如果我使用动态生成的 .ass 文件(详细说明如下)。我是否需要设置任何参数来模拟我可以使用 django 服务的服务器上存在的物理 .ass 静态文件的行为?
现在真正的问题是关于在上下文中使用 .ass 文件作为带有 jwplayer 的字幕文件。
简而言之,我的问题是我是否有一个名为 captions.vtt 的文件,其内容如下:
WEBVTT
00:00:03.000 --> 00:00:06.000
<v Roger Bingham>We are in New York City
00:00:13.000 --> 00:00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street
然后我在 django 中生成这样的内容:
#url which generated and returns captions file
urlpatterns += patterns('apps.mymodel.views',
url(r'^captions/(?P<pk>[0-9a-zA-Z]+)/$', 'captions_view',name='captions'),
)
#this view is responsible for creating .vtt files on go and returning them
def captions_view(request,pk):
"""
To Avoid multiple caption files for html5 players we use cap.vtt
as a template and then pass the text onwards.Note the cap.vtt has the approx
time for which caption should be visible,
To fix the issue with the iphone captions trying it as file download and assigning content type
"""
print('In the captions view')
myobj = Myobj.objects.get(pk=pk)
watermark_text = myobj.watermark_text
from django.template import Context
from django.template.loader import get_template
from django.http import HttpResponse
captions_context = Context(dict(text=text))
captions_body = get_template('home/cap.vtt').render(captions_context)
mimetype = "text/vtt"
response = HttpResponse(captions_body, content_type=mimetype)
response["Content-Disposition"]= "attachment; filename=capt.vtt"
#return render_to_response('home/cap.vtt',{'watermark_text':watermark_text})
return response
#template for .vtt ( name for the template is home/cap.vtt)
WEBVTT
00:00:00.000 --> 00:00:02.000
<v Roger Bingham>We are in New York City
00:00:03.000 --> 03:00:00.000
{{text}}
the output in this case would be say something like
WEBVTT
00:00:00.000 --> 00:00:02.000
<v Roger Bingham>We are in New York City
00:00:03.000 --> 03:00:00.000
woouf
如果上述问题没有任何意义,那么我面临的问题的详细信息是:字幕不会在 iphone 全屏(ios 设备)上显示因为 IOS(iphone 和 ipod)强制用户全屏查看视频。
对于我们的用例,我们动态生成字幕文件。我们提供字幕文件的方式解释如上:
如果我没记错的话,webvtt(即 .vtt)文件是一个简单的纯文本,其中包含有关视频的多种类型的信息。所以在我们的例子中,我们动态生成它并通过 url 服务它,在我们之前讨论的例子中我们可以看到类似的 here。虽然,我 'directly use a .vtt file' 它可以工作,但考虑到我的应用程序的架构,我不想这样做。但这不是类似于像静态文件一样提供服务吗?我们不是已经这样做了吗?因此,请牢记一切,最好以尽可能少的更改来解决此问题的最干净方法是什么。我假设我可能缺少 header 或可以使它工作的东西。是这样吗?
与该问题相关的更多详细信息可能会更清楚地说明该问题:
link 来自 jwplayer 支持:
https://support.jwplayer.com/customer/portal/articles/1407438-adding-closed-captions
link 来自苹果对 hls 字幕的支持:
https://developer.apple.com/library/ios/qa/qa1801/_index.html
我基于此做的一些实验:
深入挖掘后,我们还为 EXT-X-STREAM-INF
标签添加了 CLOSED-CAPTIONS
属性,但我们仍然看不到预期的结果
我们最终使用的 sample master.m3u8
文件如下:
#EXTM3U
#EXT-X-MEDIA:TYPE=CLOSED-CAPTIONS,GROUP-ID="cc"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1075000,RESOLUTION=640x360,CODECS="avc1.42001e,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1692000,RESOLUTION=854x480,CODECS="avc1.42001f,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_480.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2874000,RESOLUTION=1280x720,CODECS="avc1.42001f,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4623000,RESOLUTION=1280x720,CODECS="avc1.420028,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_1080.m3u8
我们也试过了:
#EXTM3U
#EXT-X-MEDIA:TYPE=CLOSED-CAPTIONS,GROUP-ID="cc",NAME="CC1",LANGUAGE="en",DEFAULT=YES,AUTOSELECT=YES,INSTREAM-ID="CC1"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1075000,RESOLUTION=640x360,CODECS="avc1.42001e,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1692000,RESOLUTION=854x480,CODECS="avc1.42001f,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_480.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2874000,RESOLUTION=1280x720,CODECS="avc1.42001f,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4623000,RESOLUTION=1280x720,CODECS="avc1.420028,mp4a.40.2"SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_1080.m3u8
我想确认一下我们是否正在构建用于自适应流媒体的主文件?但这并不成立,因为 .mp 视频面临同样的问题,而这种情况本不应该发生 in-case hls 是一个问题。
虽然此示例使用相同的播放器有效:
以这种方式设置您的 VTT 文件,使用相同的播放器:
http://qa.jwplayer.com/~heidi/cc_indee_test.html
http://qa.jwplayer.com/~heidi/beautifulmind.vtt
我也附上以上两个案例中两个请求的截图细节。
我已经坚持了很长时间。任何对此有所了解的人 share.It 如果您可以分享代码片段或某种工作示例,那就太好了。谢谢
为了让字幕与 JW Player(包括在 iDevices 上)一致地工作,您需要确保以下几点:
- 您正在使用 JW 7.3+;
- 字幕文件是有效的 WebVTT 文件 - 最好带有 "text/plain" mime-type;
- 字幕文件打开了相关的 CORS headers("Access-Control-Allow-Methods" 和 "Access-Control-Allow-Origin")
允许来自请求域的 GET 访问,或者文件是
托管在与播放器软件相同的域中;
- 字幕文件 URL 以“.vtt”结尾 - 由于一些马虎的 JW 编码,这是 iOS[=21= 所必需的]
或者您可以考虑为 JW Player 添加我的 iOS 字幕插件,它克服了这些问题,尊重 iOS 中的 JW 字幕样式块,并且也适用于早期的 JW 版本:http://dev.powered-by-haiku.co.uk/solutions/jwioscaptions/
问题 : 如果我使用动态生成的 .ass 文件(详细说明如下)。我是否需要设置任何参数来模拟我可以使用 django 服务的服务器上存在的物理 .ass 静态文件的行为?
现在真正的问题是关于在上下文中使用 .ass 文件作为带有 jwplayer 的字幕文件。
简而言之,我的问题是我是否有一个名为 captions.vtt 的文件,其内容如下:
WEBVTT
00:00:03.000 --> 00:00:06.000
<v Roger Bingham>We are in New York City
00:00:13.000 --> 00:00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street
然后我在 django 中生成这样的内容:
#url which generated and returns captions file
urlpatterns += patterns('apps.mymodel.views',
url(r'^captions/(?P<pk>[0-9a-zA-Z]+)/$', 'captions_view',name='captions'),
)
#this view is responsible for creating .vtt files on go and returning them
def captions_view(request,pk):
"""
To Avoid multiple caption files for html5 players we use cap.vtt
as a template and then pass the text onwards.Note the cap.vtt has the approx
time for which caption should be visible,
To fix the issue with the iphone captions trying it as file download and assigning content type
"""
print('In the captions view')
myobj = Myobj.objects.get(pk=pk)
watermark_text = myobj.watermark_text
from django.template import Context
from django.template.loader import get_template
from django.http import HttpResponse
captions_context = Context(dict(text=text))
captions_body = get_template('home/cap.vtt').render(captions_context)
mimetype = "text/vtt"
response = HttpResponse(captions_body, content_type=mimetype)
response["Content-Disposition"]= "attachment; filename=capt.vtt"
#return render_to_response('home/cap.vtt',{'watermark_text':watermark_text})
return response
#template for .vtt ( name for the template is home/cap.vtt)
WEBVTT
00:00:00.000 --> 00:00:02.000
<v Roger Bingham>We are in New York City
00:00:03.000 --> 03:00:00.000
{{text}}
the output in this case would be say something like
WEBVTT
00:00:00.000 --> 00:00:02.000
<v Roger Bingham>We are in New York City
00:00:03.000 --> 03:00:00.000
woouf
如果上述问题没有任何意义,那么我面临的问题的详细信息是:字幕不会在 iphone 全屏(ios 设备)上显示因为 IOS(iphone 和 ipod)强制用户全屏查看视频。
对于我们的用例,我们动态生成字幕文件。我们提供字幕文件的方式解释如上:
如果我没记错的话,webvtt(即 .vtt)文件是一个简单的纯文本,其中包含有关视频的多种类型的信息。所以在我们的例子中,我们动态生成它并通过 url 服务它,在我们之前讨论的例子中我们可以看到类似的 here。虽然,我 'directly use a .vtt file' 它可以工作,但考虑到我的应用程序的架构,我不想这样做。但这不是类似于像静态文件一样提供服务吗?我们不是已经这样做了吗?因此,请牢记一切,最好以尽可能少的更改来解决此问题的最干净方法是什么。我假设我可能缺少 header 或可以使它工作的东西。是这样吗?
与该问题相关的更多详细信息可能会更清楚地说明该问题:
link 来自 jwplayer 支持: https://support.jwplayer.com/customer/portal/articles/1407438-adding-closed-captions
link 来自苹果对 hls 字幕的支持: https://developer.apple.com/library/ios/qa/qa1801/_index.html
我基于此做的一些实验:
深入挖掘后,我们还为 EXT-X-STREAM-INF
标签添加了 CLOSED-CAPTIONS
属性,但我们仍然看不到预期的结果
我们最终使用的 sample master.m3u8
文件如下:
#EXTM3U
#EXT-X-MEDIA:TYPE=CLOSED-CAPTIONS,GROUP-ID="cc"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1075000,RESOLUTION=640x360,CODECS="avc1.42001e,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1692000,RESOLUTION=854x480,CODECS="avc1.42001f,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_480.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2874000,RESOLUTION=1280x720,CODECS="avc1.42001f,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4623000,RESOLUTION=1280x720,CODECS="avc1.420028,mp4a.40.2",CLOSED-CAPTIONS="cc"
4610_1080.m3u8
我们也试过了:
#EXTM3U
#EXT-X-MEDIA:TYPE=CLOSED-CAPTIONS,GROUP-ID="cc",NAME="CC1",LANGUAGE="en",DEFAULT=YES,AUTOSELECT=YES,INSTREAM-ID="CC1"
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1075000,RESOLUTION=640x360,CODECS="avc1.42001e,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1692000,RESOLUTION=854x480,CODECS="avc1.42001f,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_480.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2874000,RESOLUTION=1280x720,CODECS="avc1.42001f,mp4a.40.2",SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_720.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4623000,RESOLUTION=1280x720,CODECS="avc1.420028,mp4a.40.2"SUBTITLES="subs",CLOSED-CAPTIONS="cc"
4610_1080.m3u8
我想确认一下我们是否正在构建用于自适应流媒体的主文件?但这并不成立,因为 .mp 视频面临同样的问题,而这种情况本不应该发生 in-case hls 是一个问题。
虽然此示例使用相同的播放器有效:
以这种方式设置您的 VTT 文件,使用相同的播放器:
http://qa.jwplayer.com/~heidi/cc_indee_test.html http://qa.jwplayer.com/~heidi/beautifulmind.vtt
我也附上以上两个案例中两个请求的截图细节。
为了让字幕与 JW Player(包括在 iDevices 上)一致地工作,您需要确保以下几点:
- 您正在使用 JW 7.3+;
- 字幕文件是有效的 WebVTT 文件 - 最好带有 "text/plain" mime-type;
- 字幕文件打开了相关的 CORS headers("Access-Control-Allow-Methods" 和 "Access-Control-Allow-Origin") 允许来自请求域的 GET 访问,或者文件是 托管在与播放器软件相同的域中;
- 字幕文件 URL 以“.vtt”结尾 - 由于一些马虎的 JW 编码,这是 iOS[=21= 所必需的]
或者您可以考虑为 JW Player 添加我的 iOS 字幕插件,它克服了这些问题,尊重 iOS 中的 JW 字幕样式块,并且也适用于早期的 JW 版本:http://dev.powered-by-haiku.co.uk/solutions/jwioscaptions/