关于视频播放、视频切片、跨域访问视频

关于视频播放、视频切片、跨域访问视频

前言

  最近在着手部署上线做的一个视频网站,当我们部署到云服务器上后并开始测试视频观看并发量,发现了一个很严重的问题:带宽不足。9 或 10 个人同时观看视频的时候,就会出现有些用户加载不了视频的问题。 
  我们的云服务器是 1块钱的腾讯云,本身带宽就很低了,所以肯定没有足够大的带宽来支撑这么大的流量传输。这对于一个视频网站来说,带宽这个问题是非常致命的。在不能改变带宽的条件下,于是我们去找了一些方法来提高性能。

分析不足

  我们的视频网站使用的内置 Flash 播放器来播放视频,用户观看视频的时候是直接完全加载整个视频的(不管你看了多久),从一开始播放就开始加载,并且并不会因为用户暂停而暂停加载, 它是一直持续加载直到加载完全的。对于绝大多数用户来说,他们不一定会把视频看完,如果是加载一个小视频,那还没有什么大问题,但如果是加载一个大视频的话,这就会浪费的大量的流量,并且加载过程会持续占用带宽,使得用户量多的时候,视频加载就会出现问题。

修改第一步

  了解到这个问题之后,我们去看了别人的视频网站是如何撑起高用户量的,在视频播放的时候,我们发现它们并不是一开始就完全加载视频的,而是一段段的加载,去搜索之后发现这是一种切片的技术,用于控制流量传输。具体的切片的原理可参看 http://www.cnblogs.com/flash3d/archive/2013/11/02/3403109.html。 
  了解了切片技术之后,我们于是就开始在我们项目中应用切片的技术,我们使用的是 ffmpeg 来对视频进行切片。方法就是在程序中调用 ffmpeg 程序,然后调用切片命令对我们的视频进行切片,生成 m3u8 文件和 ts 文件,然后使用 flash 播放器播放,能够看到的确能够一段段的加载视频。 
  修改到这一步,这似乎解决了我们的问题,但是新的问题又出现了,我们发现当我们对大视频进行切片的时候,服务器的内存会占用很大,至于为什么会占用那个大,我们猜想可能是因为对视频切片时,ffmpeg 把整个视频加载到内存,所以导致内存占用高。当同时对多个视频进行切片的时候,服务器就炸掉了。于是我们又寻求新的方法去解决。 
 

修改第二步

  因为没想到好的方法去解决本地切片内存占用问题,于是我们使用了新的途径去存储播放视频,就是使用云端存储来存储视频,我们选用的是七牛云服务器来存储。它也提供了不同语音的 SDK 供开发者参考。 
  使用七牛云,我在我的 Java Web 项目里面导进必须的 4 个包,以及编写了上传视频并进行切片预处理的工具类。刚开始使用的时候也遇到许多问题。

问题1:上传不同格式的视频,有些播放不了

  一开始,我们对任何格式的视频都调用同一个切片命令,以为会生成同一种格式的视频文件。但是当我们上传的 MP4 格式的视频,切片上传后,直接在浏览器输入外链(文件的访问链接),此时能够正常播放;但是上传 avi 或者 flv 格式的视频,上传切片后,直接输入外链会变成下载文件。 
  当时一直想不通这个问题的原因,因为明明都是调用了同一个命令切片,按理来说应该格式是一样的,但是却出现不同的行为。后来通过七牛云的问答平台寻求解决方案,才发现如果在上传的时候,没有使用 saveas 参数对结果另存为 xxx.m3u8 格式,他还是任然会以原有的格式去保存。所以基于浏览器对不同视频格式的支持,对 mp4、avi、flv等格式的视频则出现不同的效果

问题2: 使用外链播放出现跨域拒绝的问题

  在我们解决完视频上传的问题之后,在播放器通过外链来播放视频的时候,发现出现跨域被拒绝的问题 (ERROR:HLSError(code/url/msg)=1tp:Cannot load M3U8: crossdomain access denied:Error #2048),google 了问题,发现原来Flash 播放器在加载跨域视频时,会先去加载云端的 corssdomain.xml 文件,然后判断是否被允许加载。 
   
解决方法:需要在七牛云端上传 crossdomian.xml 文件

<cross-domain-policy>    <allow-access-from domain="*"/>    <allow-http-request-headers-from domain="*" headers="*"/></cross-domain-policy>

Java 七牛云上传视频的工具类

基于七牛云的 API,写了一个上传视频并切片的接口,可供参考;如有错 ,可一起讨论 
该接口的配置信息采用配置文件 video.properties 来加载,具体的配置文件配置内容为:

access_key=your access keysecert_key=your secert keybucketname=你的存储空间pipeline=你的多媒体处理队列名fops=avthumb/m3u8/noDomain/1/vb/500k/t/120(这是切片命令)若是要做其他处理,请参照七牛云 SDKdomain=你的七牛云映射域名
public class QiNiuUtil {    private static String DEFAULT_PROPERTIES = "video.properties";    private static Properties properties = new Properties();    static {        String path = QiNiuUtil.class.getResource("/").toString();        path = path.substring(6, path.length() - 8) + DEFAULT_PROPERTIES;        System.out.println(path);        try {            FileInputStream fileInputStream = new FileInputStream(path);            properties.load(fileInputStream);            System.out.println(properties.toString());        } catch (IOException e) {            System.out.println("配置文件不存在,加载配置文件失败");        }

    }

    public static String domian = properties.getProperty("domain");

    private static String ACCESS_KEY = properties.getProperty("access_key");    private static String SECRET_KEY = properties.getProperty("secert_key");

    // 要上传的空间    private static String bucketname = properties.getProperty("bucketname");

    // 设置切片操作参数    private static String fops =properties.getProperty("fops");

    // 设置转码的队列    private static String pipeline = properties.getProperty("pipeline");

  //密钥配置  private static Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);  //创建上传对象  private static UploadManager uploadManager = new UploadManager();

  //上传策略中设置persistentOps字段和persistentPipeline字段  public static String getUpToken(String pfops){      return auth.uploadToken(bucketname,null,3600,new StringMap()          .putNotEmpty("persistentOps", pfops)          .putNotEmpty("persistentPipeline", pipeline), true);  }

  public static boolean upload(byte[] data, String key) throws IOException{

      Response res = null;      try {          // 调用put方法上传          // 指定文件以 m3u8 格式另存          String urlbase64 = UrlSafeBase64.encodeToString(bucketname + ":" + key + ".m3u8");          res = uploadManager.put(data, key, getUpToken(fops + "|saveas/"+ urlbase64));

          //打印返回的信息          System.out.println(res.bodyString());

      } catch (QiniuException e) {          Response r = e.response;          // 请求失败时打印的异常的信息          System.out.println(r.toString());

          try {              //响应的文本信息            System.out.println(r.bodyString());          } catch (QiniuException e1) {              //ignore          }      }     return res.isOK();  }

}
时间: 2024-10-10 08:46:00

关于视频播放、视频切片、跨域访问视频的相关文章

深入理解jsonp解决跨域访问

在我们做的这个项目中充分利用jsonp跨域这一个特性,完成了简单的单点登录功能和权限统一认证控制,实现思路并不复杂同各种实现单点登录的产品相比可以说微不足道,各有各的好处.各有各的优点,选择什么方式实现完全取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了目前开发项目的整体架构. 这不是一项凭空产生的新东西,仅仅是JS的一个特性而已之前没有被我们提及也没有被我们注意到原来经常使用的js还可以跨域呢,觉的我们对已经学过的东西理解还不是不够深入.有些肤浅,JS绝大多数在浏览器中运行

GoodReader跨域访问HT for Web手册

最近下载了GoodReader App,发现GoodReader中打开的页面不仅支持WebGL,同时还允许跨域访问资源,以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问,否则需采用<矢量组件设计之道(四)>列举的几种解决跨域访问图片或3D的OBJ等资源的技巧.而现在GoodReader中直接打开就可以玩了,加上GoodReader自身对文档管理的方便性,这1块钱的价格真是物超所值! 以下为GoodReader在iPhone下跨域访问HT for Web手册过程的视频,

Flash完美跨域访问的方法

首先,你要确定以下几点,否则可能无法实现: 1.你要跨到哪个域,你必须能管理那域上文件,因为这里要放一个通行文件. 2.你的Flash如果只有SWF,那不一定能实现,因为有时,Flash的AS中,要加入一句话.如果你是跨域调图片.视频一类的,可以用通行文件的方法.通行文件制作方法,请将以下代码存为 crossdomain.xml ,并放到要跨域的目标站点根目录下面.就是说,你的FLASH在 a.com ,你要访问 b.com 上的资源,你就要确定 http://b.com/crossdomain

iframe跨域访问

js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容:如果支持contentDocument也可以直接document.getElementById("myframe&

跨域访问和同源策略

因为在同一个浏览器窗口中能够同时打开多个网站的页面,而且它们都处于同一个会话中,如果不禁止跨域访问则会造成用户隐私数据泄露和登录身份冒用的问题,所以浏览器会使用同源策略限制跨域访问. 在浏览器中,通过JS代码访问不同域名下的URL或者iframe时,会被禁止访问.而不是通过JS代码进行的跨域访问不存在跨域问题!比如跨域加载图片,引用JS文件,下载各种文件,使用iframe跨域嵌入其他网站的页面都是可以的. 跨域访问被禁止有时会给应用开发带来阻碍,但在符合特定条件时也有相应的方法在保证安全的情况下

框架元素-跨域访问-window.name

页面A:页面B,你能传个数据给我吗? 页面B:额,我们不在同一个域内,因为涉及到WEB安全问题,所以浏览器禁止我直接向你传数据. 页面A:有什么办法可以解决这个问题吗? 页面B:可以使用window.name. 页面A:那你需要我做些什么? 页面B:1.你先动态创建一个iframe节点:  2.设置节点属性src指向我:  3.我会设置window.name = 'b':  4.然后你重新设置节点iframe的属性src指向和你在同一个域下的兄弟页面C:  5.虽然属性src的值变了,但是win

前端跨域访问

1. JSONP 2. CORS(Cross-origin resource sharing) 2.1 运行模式 2.2 JQuery支持CORS 2.3 与JSONP相比 3. 跨域访问在点评的应用 References 在互联网应用中: 一个页面需要请求多个域名下的web服务端接口 同时一个web服务接口可能会被很多不同域名下的页面请求. 一个web应用如果支持为了支持以上模式而申请多个域名是不合算的,因为域名申请和管理所占用的资源比较大,因此服务端支持跨域就成了一个更合理的解决方案.解决跨

ajax 设置Access-Control-Allow-Origin实现跨域访问

ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,type设为POST,也会自动变为GET. 官方问题说明: “script”: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string

Ajax跨域访问wcf服务中所遇到的问题总结。

工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务. 问题:由于web项目和wcf服务,不在同一个端口之中,所以涉及到“跨域”的问题.跨域访问的时候,需要对服务的接口和方法做一定的限定.具体参考:http://www.cnblogs.com/yangbingqi/p/2096197.html 2.解决了跨域问题,我们需要把服务部署到IIS.vs20