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

小小小虫 小小小虫     2022-08-02     796

关键词:

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

前言

  最近在着手部署上线做的一个视频网站,当我们部署到云服务器上后并开始测试视频观看并发量,发现了一个很严重的问题:带宽不足。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 key
secert_key=your secert key
bucketname=你的存储空间
pipeline=你的多媒体处理队列名
fops=avthumb/m3u8/noDomain/1/vb/500k/t/120(这是切片命令)若是要做其他处理,请参照七牛云 SDK
domain=你的七牛云映射域名
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();
}

}

尝试在视频标签上设置跨域属性时视频播放已损坏

】尝试在视频标签上设置跨域属性时视频播放已损坏【英文标题】:whentryingtosetcrossoriginattributeonvideotagvideoplaybackisdamaged【发布时间】:2014-08-2303:31:55【问题描述】:该问题出现在chrome浏览器桌面上。尝试向视频添加轨道元素时... 查看详情

一个关于视频播放的小项目

视频点播系统项目名称:视频点播系统项目描述:一个用户可以通过浏览器上传视频,且对自己上传的视频进行管理,而其他用户可以通过浏览器观看视频概要设计:采用不太严谨的MVC框架  model:数据... 查看详情

cesium性能优化:如何平衡场景渲染与视频播放?

...影模型的Cesium场景加载时,同步播放客户提供的当地宣传视频。但是,当前端将宣传视频通过video标签正常进行播放时,发现Cesium场景渲染开始卡顿了。于是开始寻找平衡场景渲染与视频播放的具体方案。思路推断:地图切片与... 查看详情

video.js视频播放器

...一款web视频播放器,支持html5和flash两种播放方式。更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 ,阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打... 查看详情

mediaelement.js之浏览器跨域请求视频播放

浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源需要了解的知识-域(主域,子域,什么是跨域)  简单来说由于浏览器同源策略,凡是发送请求url的协议(http,https... 查看详情

免费视频播放器videojs中文教程

...一款web视频播放器,支持html5和flash两种播放方式。更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 ,阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打... 查看详情

免费视频播放器videojs中文教程

...一款web视频播放器,支持html5和flash两种播放方式。更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 ,阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打... 查看详情

网页视频经过m3u8技术切片且加密的ts文件在播放时有缓存文件,但提取出来就无法播放了,这种情况

网页视频经过m3u8技术切片且加密的TS文件在播放时有缓存文件,但提取出来就无法播放了,这种情况能解决吗?浏览器播放时是怎么解密的?各位大神多多关注一下,我真的很需要这视频用格式工厂软件可以把m3u8格式文件转换... 查看详情

django关于视频播放

django实现视频播放并适配主流浏览器,应用比较广泛的就是videojs了。videojs:<head><linkhref="http://vjs.zencdn.net/6.6.3/video-js.css"rel="stylesheet"><!--Ifyou‘dliketosupportIE8--><scriptsrc="http://vjs.zenc 查看详情

一个关于视频播放的小项目

视频点播系统项目名称:视频点播系统项目描述:一个用户可以通过浏览器上传视频,且对自己上传的视频进行管理,而其他用户可以通过浏览器观看视频概要设计:采用不太严谨的MVC框架  model:数据... 查看详情

关于unity视频播放器插件avprovideo360度全景视频播放

1.官网下载该插件或者我分享的链接:链接:https://pan.baidu.com/s/1boGeJ8r密码:mvbf2.拖入官方做好的预制体“360SphereVideo”或者“360CubeVideo”(两种不同的360度全景)到场景中,并将场景中的摄像机拖动到“Sphere”下方并Resert3.设置“AV... 查看详情

关于unity视频播放器插件avprovideo平面ui视频播放

1.官网下载该插件或者我分享的链接: 链接:https://pan.baidu.com/s/1boGeJ8r密码:mvbf2.新建项目导入资源,添加以下游戏物体与UI到场景中 3.此处先建立一个Canvas再创建  4.将创建好的MediaPlayer组件拖入  5.根据自... 查看详情

关于unity视频播放器插件avprovideo3d物体上视频播放

1.官网下载该插件或者我分享的链接:链接:https://pan.baidu.com/s/1boGeJ8r密码:mvbf2.新建项目创建主要控制物体3.创建对于视频播放在3D物体身上的材质4.给控制物体添加ApplyToMaterial组件5.赋值ApplyToMaterial组件中的Material为咱们创建的... 查看详情

ffmpeg进行视频切片,生成m3u8

参考技术Ahtml5可直接播放的mp4格式要求视频编码为h.264,音频编码为aac,在转换前可以查看下原视频的编码格式。转换命令命令说明:再将完整的ts文件进行切片处理,命令如下:说明: 查看详情

asp.net关于上传flv格式视频时获取视频播放时间问题

我要做一个asp.net视频网站像56,youku问题1:用户上传视频时怎么获取这个视频播放多长时间问题2:怎么把其他格式转成flv格式问题1最主要各位高手帮忙回答下参考技术A向楼上的致谢,学习一下。顺便回答楼主的问题,要对上传的视... 查看详情

如何使用html5视频播放器?

...layer?【发布时间】:2015-08-0215:45:35【问题描述】:如果有关于使用自定义控件设置html5视频播放器的想法。【问题讨论】:【参考方案1】:请访问下面给出的链接。http://www.webdesign-flash.ro/p/uvp/modern-white.html#/?playlistId=0&videoId=0ht... 查看详情

关于wordpress上传视频&音乐

在文本或模版上传两者其一后,显示的不是播放器,而是一个链接,怎么弄!?谢谢!参考技术A上传视频(或音乐)有两种方法,一种是把视频(或音乐)上传到优酷,然后引用优酷的视频代码,要有播放器的那种;另外一种是上传到... 查看详情

springboot视频播放(解决mp4大文件无法播放),整合ffmpeg,用m3u8切片播放。(代码片段)

一.首先说一下,不超过500M的视频如何提供给前端,这种方式比较快速,但是对前端不友好,特别大的视频文件,浏览器无法播放。下面是Java代码实例。这种方式不需要引入依赖。首先进行配置importorg.springfram... 查看详情