阿里云视频点播详解

阿里云 专栏收录该内容
2 篇文章 1 订阅

整理了一下阿里云的视频点播相关的问题,记下来,以备后用。

  阿里云视频点播是近几年刚有的服务,与OSS结合较深。开发之初找到有用的文档实在少之又少,所以把完整的开发流程已经我遇到一些问题记录下来。

阿里云视频点播介绍:
能查到的官话就不在这里赘述了,按照我在使用过程中的实际体验来说:
优点:
1、不占服务器硬盘
2、视频播放器的样式阿里提供,并且可以手动个性化改造(下面有介绍)
3、视频是通过授权的方式进行读取播放的,没有像腾讯视频点播一样直接使用链接
4、自带视频第一帧的功能,阿里赛高ヾ(゚∀゚ゞ)!(代码中有说明)
缺点:
1、没有特别注重安全,如果开发人员不注意可能会被盗用资源。
2、读取比较麻烦
3、会出现播放一次之后层级格外高的情况,盖住其他的东西。不过我有解决方案٩(๑>◡<๑)۶
4、播放器虽然可以定制,但是好丑哦
5、视频如果比较大,上传过程虽然会成功,但是用来读取视频的id可能会丢掉,需要注意呦

  准备工作,当然是先申请视频点播服务,这一步比较麻烦,绑定域名之后,还要绑定CNAME等操作,所以就不赘述了,按照规定绑定完毕即可

————————-分————————-割————————-线————————-

需要引入阿里视频点播的包,官方api里提供的有;

首先我们要上传视频到自己的服务器作为中转;

一般的上传方法即可,如果不知道上传方法的话,可以看我上一篇文章。

然后上传到阿里的服务器:

    /**
     * 
     * 上传视频公用方法
     * 
     * @param fileName:上传文件所在的绝对路径(必须包含扩展名)
     * @param title:视频标题
     * @param type:视频类型(描述)
     * @return video对应的视频id
     * @throws Exception
     */
    public String uploadVideo(String fileName, String title, String type)
            throws Exception {
        String resultVideoId = "";
        // 需要替换为真实用户AK
        // 构造上传请求实例
        UploadVideoRequest request = new UploadVideoRequest("OSS的accessKeyId",
                "OSS的accessKeySecret", title, fileName);
        // 视频分类ID
        request.setCateId(0);
        // // 视频标签,多个用逗号分隔
        // request.setTags("标签1,标签2");
        // // 视频自定义封面URL
        // request.setCoverURL("http://cover.sample.com/sample.jpg");
        // // 设置上传完成后的回调URL
        // request.setCallback("http://callback.sample.com");
        // 可指定分片上传时每个分片的大小,默认为10M字节
        request.setPartSize(10 * 1024 * 1024L);
        // 可指定分片上传时的并发线程数,默认为1 (注: 该配置会占用服务器CPU资源,需根据服务器情况指定)
        request.setTaskNum(1);
        request.setDescription(type);
        // 设置是否使用水印
        request.setIsShowWaterMark(true);
        try {
            UploadVideoImpl uploader = new UploadVideoImpl();
            UploadVideoResponse response = uploader.uploadVideo(request);
            // 上传成功后返回视频ID
            resultVideoId = response.getVideoId();
        } catch (ClientException e) {
            System.out.println("UploadVideoRequest Client Exception:");
            e.printStackTrace();
        }
        return resultVideoId;
    }

这个resultVideoId是读取视频的标识,一定保存好

至此,上传已经完成了,下面我们看读取方法,比较麻烦的:

阿里的视频点播是通过播放凭证来播放的,so需要获取视频播放凭证

首先,是操作阿里视频点播的类,这个需要自己本地化改造哦

package com.wzgs.util.aliyun;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.exceptions.ServerException;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthRequest;
import com.aliyuncs.vod.model.v20170321.GetVideoPlayAuthResponse;

import com.wzgs.controller.BaseController;

/**
 * 阿里云视频点播相关方法
 * 
 * @author yu
 *
 */
public class VideoDemand extends BaseController {
    DefaultProfile profile = DefaultProfile.getProfile(
            "自己选择服务器所在的地区,这个是华东2的:cn-shanghai", "OSS的accessKeyId",
            "OSS的accessKeySecret");

    /**
     * 获取视频授权
     * 
     * @param videoId
     *            视频Id
     * @return
     */
    public GetVideoPlayAuthResponse projectPalyVideo(String videoId) {
        DefaultAcsClient client = new DefaultAcsClient(profile);
        return getVideoPlayAuth(client, videoId);
    }

    GetVideoPlayAuthResponse getVideoPlayAuth(DefaultAcsClient client,
            String videoId) {
        GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
        request.setVideoId(videoId);
        GetVideoPlayAuthResponse response = null;
        try {
            response = client.getAcsResponse(request);
        } catch (ServerException e) {
            e.printStackTrace();
            return response;
        } catch (ClientException e) {
            e.printStackTrace();
            return response;
        }
        response.getPlayAuth(); // 播放凭证
        response.getVideoMeta(); // 视频Meta信息
        return response;
    }
}

然后是读取一些信息的片段

    // 获取视频相关信息
    VideoDemand videoDemand = new VideoDemand();
    GetVideoPlayAuthResponse videoPlayAuthReq = videoDemand
            .projectPalyVideo("保存的视频id");
    // 读取视频第一帧(o゚▽゚)o  
    String coverurl = videoPlayAuthReq.getVideoMeta().getCoverURL();
    // 读取播放凭证
    String playAuth = videoPlayAuthReq.getPlayAuth();       
    // 视频Id
    String  videoid = "保存的视频id";

至此,读取也就可以了,当然啦,会有一些小问题,可以留言讨论。

然后说一下阿里的播放器怎么使用和个性化改造:

楼主用的是jsp,勿喷 (〃’▽’〃)

引入文件

<!-- 需要写一个div -->
<div class="video-big" style="height:100%;width:100%">
    <div class="prism-player" id="J_prismPlayer" style="height:80px;z-index:0"></div>
</div>

<!-- 阿里云视频点播JS -->
<script src="http://g.alicdn.com/de/prismplayer/1.7.6/prism-h5-min.js"></script>
<!-- js方法 -->
<script type="text/javascript">
        $(window).ready(function(){
            var videoHtml = '<div class="prism-player" id="J_prismPlayer"        style="height:80px;z-index:0"></div>'
            var video = $('.video-big video')
            video.bind("ended",function(){
                resetVideo()
            })
            video.bind("pause",function(){
                resetVideo()
            })
            function isWeiXin(){ 
                var ua = window.navigator.userAgent.toLowerCase(); 
                if(ua.match(/MicroMessenger/i) == 'micromessenger'){ 
                    return true; 
                }else{ 
                    return false; 
                }
            }
            function resetVideo (){
                $('.video-big').html(' ');
                $('.video-big').html(videoHtml)

                var player = new prismplayer({
                      id: 'J_prismPlayer',
                      width: '100%',
                      height:'400px',
                      autoplay: false,
                      //播放方式一:推荐
                      //下面的这三个值就是在读取信息的代码片段里获取到的值
                      vid : '${videoid}',
                      playauth : '${playAuth}',
                      cover: '${coverurl}',      
                });
                var video = $('.video-big video')  
                video.bind("ended",function(){
                    resetVideo()
                })
                video.bind("pause",function(){
                    console.log('暂停了')
                    resetVideo()
                })
            }
        })
</script>
<!-- 阿里云视频点播CSS -->
<link rel="stylesheet prefetch" href="http://g.alicdn.com/de/prismplayer/1.7.6/skins/default/index-min.css">
<!-- 手写的一个css -->
video {
    object-fit:fill;
    width:100%;
    height:120px;
}
.prism-player .prism-big-play-btn {
    width: 30px;
    height: 30px;
    background: url(../img/play.png) no-repeat center;
    background-size:30px 30px;
    left:50% !important;
    top:50% !important;
    margin-left: -15px;
    margin-top:-15px
}
.prism-player .prism-controlbar .prism-controlbar-bg {
    width: 1%;
    height: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.prism-player .prism-time-display .current-time {
     display:none;
}
.prism-player .prism-play-btn {
  display:block
}
.prism-player .prism-fullscreen-btn {
   display:block
}
.duration{
 display:block;
}
.time-bound{
  display:none;
}
.prism-player .prism-progress {
    display:block;
}
@media (max-width: 767px){
    #J_prismPlayer{
        height:200px !important;
    }
    .prism-player .prism-time-display .current-time {
      display:none;
    }
    .prism-player .prism-play-btn {
      display:none;
    }
    .prism-player .prism-fullscreen-btn {
       display:none;
    }
    .duration{
      display:none;;
    }
    .time-bound{
      display:none;;
    }
    .prism-player .prism-progress {
      display:none;;
    }
}

至此,阿里云的播放器也就初始化改造完毕了,非常简单的,在css中有一个play.png的图片是视频中间播放按钮的图片,附件上传不了,可以留言给我要。

强调一下,在页面读取视频的方法在初始化的js中,请仔细查看,需要配合读取视频信息的jav代码片段

下面解答一下上面说的一些问题:

关于视频不太安全的问题:

我试过,可以通过网站上显示的链接进行盗用,也就是在后台获取的授权信息能被看到,通过这些信息去盗版,可以试着隐藏或修改显示的连接和授权等信息来进行保密

关于播放完毕层级过高的问题:

可以在播放完毕之后删除div,然后在重新读取授权信息初始化播放器,虽然很简单,但是很有效哦

最后吐槽一下,阿里的东西都挺好用,但是就是说不上来的不舒服感,细节不是说不好,相比来说细节体验方面比其他的相同产品差了一下,比如乐视云的视频点播,简直是完美的。

  • 1
    点赞
  • 23
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值