视频播放协议有rtmp和hls
rtmp延时低 但是需要flash,后产生http-flv协议,使用flv.js
hls苹果提出,所有平台可用。
rtmp
百度video.js cdn
下载video.min.js&video-js.min.css v
百度videojs-flash
下载videojs-flash.min.js
还需要video-js.swf
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/components/aclome-app-bc-ui/pages/config.jsp"%>
<%@ page import="com.neusoft.acap.osgi.delegate.ResourceDelegate" %>
<%@ page import="com.neusoft.aclome.core.security.AclomeContext"%>
<%
String componentPath = ResourceDelegate.getComponentPath(request);
String domainComponentPath = ResourceDelegate.getComponentPath(request,"aclome-app-bc-domain");
String socketioPath = ResourceDelegate.getComponentPath(request, "socketio");
String userName = AclomeContext.getCurrentUser().getUserName();
String localAddr = request.getLocalAddr();
int localPort = request.getLocalPort();
%>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var componentPath = "<%=componentPath%>";
var uiComponentPath = "<%=uiComponentPath%>";
var localeStr = "<%=localeStr%>";
var domainId = bc.domainId;
var eventBus = null;
var userName = "<%=userName%>";
var isBCDomainAdmin = eval(bc.isDomainAdmin);
bc.isShareResource = eval(bc.isShareResource);
var dataCenterId = bc.dataCenterId;
bc.localAddr = "<%=localAddr%>";
bc.localPort = "<%=localPort%>";
</script>
<title>"<%=request.getParameter("videoName")%>"</title>
<!--引入播放器样式-->
<link rel="stylesheet" href="<%=componentPath%>/scripts/common/video/video-js.min.css" type="text/css"></link>
<link rel="stylesheet" href="<%=componentPath%>/scripts/common/video/videojs-flash.min.js" type="text/css"></link>
</head>
<body>
<!--vjs-big-play-centered 播放按钮居中-->
<!--poster默认的显示界面,就是还没点播放,给你显示的界面-->
<!--controls 规定浏览器应该为视频提供播放控件-->
<!--preload="auto" 是否提前加载-->
<!--autoplay 自动播放-->
<!--loop=true 自动循环-->
<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来,如data-setup={"autoplay":true}-->
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
data-setup='{}'>
<!--src: 规定媒体文件的 URL type:规定媒体资源的类型-->
</video>
<%--<script src="https://unpkg.com/video.js/dist/video.min.js"></script>--%>
<script src="<%=componentPath%>/scripts/common/video/video.min.js"></script>
<script src="<%=componentPath%>/scripts/common/video/videojs-flash.min.js"></script>
<script type="text/javascript">
var videoName = "<%=request.getParameter("videoName")%>";
// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
// videojs.options.flash.swf = 'video-js.swf';
// var player = videojs('my-player'); //my-player为页面video元素的id
/* var options = {
techOrder: ['flash', 'html5']
};*/
videojs.options.flash.swf = '<%=componentPath%>/scripts/common/video/video-js.swf';
/* videojs('my-player', {techOrder: ['flash', 'html5']});*/
var player = videojs('my-player');
var videoPath = 'rtmpt://10.4.41.73:5080/oflaDemo/m.mp4';
player.src({type: 'rtmp/mp4', src: videoPath});
player.load();
player.play();
/* alert(videojs);
alert(global.videojs);*/
/* var player = videojs('my-player', options, function onPlayerReady() {
// videojs.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
///this.on('ended', function() {
// videojs.log('Awww...over so soon?!');
//});
});*/
/* var videoPath = 'rtmpt://10.4.41.73:5080/oflaDemo/777.mp4';
player.src(
{type: 'rtmp/mp4', src: videoPath}
);*
player.play(); //播放*/
// 1. 播放 player.play()
// 2. 停止 player.pause()
// 3. 暂停 player.pause()
</script>
<!--引入播放器js-->
<%--<script src="<%=componentPath%>/scripts/common/video/video.min.js"></script>--%>
</body>
</html>
此方法部分视频加载会有卡顿
video.js 7版本用require.js会造成global问题
hls
百度hls cdn
下载hls.min,js &video-js.min.css(样式可不引)
不用插件的方案:利用hls(http living stream)协议
- 上传MP4文件
- 用ffmpeg命令行工具将mp4转换成m3u8格式(此步骤应在上传结束后自动执行)
- 利用nginx作为 http服务
- 使用html5 video组件播放 http://xxxxxxx/xxx.m3u8
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
启动nginx
./nginx -c /etc/nginx/conf.d/nginx_hls.conf -s reopen
页面访问:
http://xxxxx/index1.html, 播放过程中可以看到视频片段(.ts)是动态加载的。
转换命令:
ffmpeg -i play.mp4 -profile:v baseline -level 3.0 -s 640x360 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls /video/index.m3u8
play.mp4是输入
/video/index.m3u8是输出
time 10 标识每个片段时长为10秒
转换完成后会在目标目录下生一个索引文件index.m3u8和不定数量的视频片段:
实际使用时对上传的转换后的文件应进行合理的管理,划分好目录,每个转换后的目录代表一个MP4文件,例如
登录人张三的账号/play.pm4/ index.m3u8
/play.pm4/ index0.ts
…
可用Docker镜像吗?直接放k8s里。
https://github.com/alfg/docker-nginx-rtmp
1、 设置上网代理
vi /etc/profile
export http_proxy=http://username:passowrd@dl-proxy.neusoft.com:8080
export https_proxy=$http_proxy
export no_proxy= "localhost,127.0.0.1,.neusoft.com,10.4.45.,10.4.79.,10.4.53."
保存后执行source /etc/profile
注意passwrod如果有特殊字符需要变成ascii码,比如“!”要改成“%21”,21是16进制
2、 配置repo
rm -f /etc/yum.repo.d/*.repo
将附件CentOS7-Base-163.repo复制到这 /etc/yum.repo.d/
3、 配置https认证
将neusoft.cer和certificates.sh放到 /
执行 sh certificates.sh
4、安装ffmpeg的yum repo
wget https://download1.rpmfusion.org/free/el/rpmfusion-free-release-7.noarch.rpm
rpm –iUvh rpmfusion-free-release-7.noarch.rpm
vi rpmfusion-free-updates.repo 将里面的gpgcheck=1改成gpgcheck=0
yum clean all
yum update
yum install ffmpeg ffmpeg-libs –y
4、 Nginx安装
git clone https://github.com/arut/nginx-rtmp-module.git
cd nginx-rtmp-module/
wget http://nginx.org/download/nginx-1.17.5.tar.gz
cd nginx-rtmp-module/
tar -zxvf nginx-1.17.5.tar.gz
cd nginx-1.17.5
./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module --with-http_ssl_module
make && make install
5、 配置nginx
参见昨天发的配置文件, 放在/etc/nginx/conf.d/
注意跨域访问的配置。
6、 启动nginx
/usr/local/nginx/sbin/nginx
停止 /usr/local/nginx/sbin/nginx -s stop
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/components/aclome-app-bc-ui/pages/config.jsp"%>
<%@ page import="com.neusoft.acap.osgi.delegate.ResourceDelegate" %>
<%@ page import="com.neusoft.aclome.core.security.AclomeContext"%>
<%
String componentPath = ResourceDelegate.getComponentPath(request);
String domainComponentPath = ResourceDelegate.getComponentPath(request,"aclome-app-bc-domain");
String socketioPath = ResourceDelegate.getComponentPath(request, "socketio");
String userName = AclomeContext.getCurrentUser().getUserName();
String localAddr = request.getLocalAddr();
int localPort = request.getLocalPort();
%>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var componentPath = "<%=componentPath%>";
var uiComponentPath = "<%=uiComponentPath%>";
var localeStr = "<%=localeStr%>";
var domainId = bc.domainId;
var eventBus = null;
var userName = "<%=userName%>";
var isBCDomainAdmin = eval(bc.isDomainAdmin);
bc.isShareResource = eval(bc.isShareResource);
var dataCenterId = bc.dataCenterId;
bc.localAddr = "<%=localAddr%>";
bc.localPort = "<%=localPort%>";
</script>
<title>"<%=request.getParameter("videoName")%>"</title>
<!--引入播放器样式-->
<script src="<%=componentPath%>/scripts/common/video/hls.min.js"></script>
</head>
<body>
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
width="800" height="500" data-setup='{}'>
<!--src: 规定媒体文件的 URL type:规定媒体资源的类型-->
</video>
<script type="text/javascript">
if(Hls.isSupported()) {
var video = document.getElementById('my-player');
var hls = new Hls();
var videoPath = "http://10.4.45.10:8085/hls/777_mp4/index.m3u8";
hls.loadSource(videoPath);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
<!--引入播放器js-->
<%--<script src="<%=componentPath%>/scripts/common/video/video.min.js"></script>--%>
</body>
</html>
此时需要搭建nginx