阿里云视频点播详解

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

  阿里云视频点播是近几年刚有的服务，与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，然后在重新读取授权信息初始化播放器，虽然很简单，但是很有效哦

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