web视频上传和播放功能

最新推荐文章于 2022-05-27 16:05:05 发布

咕噜咕噜XoX

最新推荐文章于 2022-05-27 16:05:05 发布

阅读量1.3k

点赞数 1

文章标签：视频

本文链接：https://blog.csdn.net/qq_31848117/article/details/102912868

版权

视频播放协议有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

咕噜咕噜XoX

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web视频上传和播放功能

视频播放协议有rtmp和hlsrtmp延时低但是需要flash，后产生http-flv协议，使用flv.jshls苹果提出，所有平台可用。rtmp百度video.js cdn下载video.min.js&video-js.min.css v百度videojs-flash下载videojs-flash.min.js还需要video-js.swf代码<!DOCTYP...
复制链接

扫一扫