将 MP4 流式传输到 iOS 无法与 JWPlayer 和 CloudFront 配合使用

发布于 2024-12-01 23:21:35 字数 2174 浏览 2 评论 0原文

尝试设置一个测试页面来访问托管在 S3 上并使用 CloudFront 进行流式传输的视频。我使用的播放器是 JWPlayer，它应该也适用于 iOS 设备。

不幸的是，当我在 iPhone 上打开它时，没有任何反应……我确信答案是显而易见的，但在过去的一个小时里我一直想不起来。这是代码（主要是来自 http://aws.amazon 的复制/粘贴.com/articles/4101?_encoding=UTF8&jiveRedirect=1）：

<!--     THIS IS A BASIC HTML FILE TO PLAY MP4's USING JW PLAYER 
The following code is from longtailvideo.com's 'Setup Wizard', found at http://www.longtailvideo.com/support/jw-player-setup-wizard -->
<HTML>
<HEAD>
<TITLE>  
Streaming Video with JW Player
</TITLE>    
</HEAD>
<BODY>
<!-- Put a header above your video, if you like
-->
<H1>This is my header</H1>
<script type='text/javascript' src='http://s3.amazonaws.com/intrinseque-video/swfobject.js'></script>   
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('http://s3.amazonaws.com/intrinseque-video/player.swf','mpl','470','290','9');
     so.addParam('allowfullscreen','true');
     so.addParam('allowscriptaccess','always');
     so.addParam('wmode','opaque');
     so.addVariable('file','mp4:oceans-clip.ipad.mp4'); 
         so.addVariable('streamer','rtmp://s1m21pqfl8vlrl.cloudfront.net/cfx/st/'); 
     so.write('mediaspace');
</script>
</BODY>
</HTML>

<!--Common problems:
-   You cannot have any spaces in any of your URL's (including your 'rtmp://...'  URL)              (i.e.,  http:// thereisaspaceatthebeginninghere.xxx) 
-   Be sure you are calling the correctly numbered version of the flowplayer objects/players (i.e. flowplayer-3.2.2.swf
-   You cannot have duplicates of 's3.amazonaws.com' or 'cloudfront.net' in the same address (i.e. (http://s3.amazonaws.com/s3.amazonaws.com/YOUR_BUCKET/player.swf)
-   There is a different naming protocol for mp4 vs flv files. For .mp4 files, YOU MUST write it as 'mp4:YOUR_VIDEO_FILE_WITHOUT_THE _MP4_SUFFIX'. For .flv files, you simply write the name of the file, 'YOUR_VIDEO_FILE_WITHOUT_THE_FLV_SUFFIX'.
-->

原文

Trying to setup a test page that access a video hosted on S3 and streamed using CloudFront. The player I'm using is JWPlayer, which is supposed to work with iOS devices as well.

Unfortunately, nothing happens when I open it on the iPhone... I'm sure the answer is obvious, but it has eluded me for the last hour. Here's the code (mostly a copy/paste from http://aws.amazon.com/articles/4101?_encoding=UTF8&jiveRedirect=1):

<!--     THIS IS A BASIC HTML FILE TO PLAY MP4's USING JW PLAYER 
The following code is from longtailvideo.com's 'Setup Wizard', found at http://www.longtailvideo.com/support/jw-player-setup-wizard -->
<HTML>
<HEAD>
<TITLE>  
Streaming Video with JW Player
</TITLE>    
</HEAD>
<BODY>
<!-- Put a header above your video, if you like
-->
<H1>This is my header</H1>
<script type='text/javascript' src='http://s3.amazonaws.com/intrinseque-video/swfobject.js'></script>   
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('http://s3.amazonaws.com/intrinseque-video/player.swf','mpl','470','290','9');
     so.addParam('allowfullscreen','true');
     so.addParam('allowscriptaccess','always');
     so.addParam('wmode','opaque');
     so.addVariable('file','mp4:oceans-clip.ipad.mp4'); 
         so.addVariable('streamer','rtmp://s1m21pqfl8vlrl.cloudfront.net/cfx/st/'); 
     so.write('mediaspace');
</script>
</BODY>
</HTML>

<!--Common problems:
-   You cannot have any spaces in any of your URL's (including your 'rtmp://...'  URL)              (i.e.,  http:// thereisaspaceatthebeginninghere.xxx) 
-   Be sure you are calling the correctly numbered version of the flowplayer objects/players (i.e. flowplayer-3.2.2.swf
-   You cannot have duplicates of 's3.amazonaws.com' or 'cloudfront.net' in the same address (i.e. (http://s3.amazonaws.com/s3.amazonaws.com/YOUR_BUCKET/player.swf)
-   There is a different naming protocol for mp4 vs flv files. For .mp4 files, YOU MUST write it as 'mp4:YOUR_VIDEO_FILE_WITHOUT_THE _MP4_SUFFIX'. For .flv files, you simply write the name of the file, 'YOUR_VIDEO_FILE_WITHOUT_THE_FLV_SUFFIX'.
-->

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅浅淡淡 2024-12-08 23:21:35

查看 http://www .longtailvideo.com/support/jw-player/jw-player-for-flash-v5/49/using-cloudfront

您需要在代码中添加以下内容，

     modes: [{
        type: "flash",
        src: "/assets/player.swf"
    },{
        type: "html5"
        config: {
            file: "http://dXXXXXXXXXXXX.cloudfront.net/example.mp4"
            provider: "video"
        }
    }],

以便正确处理两个闪光灯和html5。

Check out http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/49/using-cloudfront

You need to add something along the lines of:

     modes: [{
        type: "flash",
        src: "/assets/player.swf"
    },{
        type: "html5"
        config: {
            file: "http://dXXXXXXXXXXXX.cloudfront.net/example.mp4"
            provider: "video"
        }
    }],

to the code for it to handle correctly both flash and html5.

回复收藏 0 原文