视频的上传及购买播放

一、上传视频

 

1：使用百度云：

1. 登录百度云：https://cloud.baidu.com/ 进入管理控制台；
2. 开通 “视频点播VOD” 服务；
3. 在后台管理系统 --> 右上角“安全认证” --> 获取 “AccessKey”；
4. 在 “视频点播VOD” 界面 --> 全局设置 --> 发布设置 --> 安全设置 --> 获取 “UserKey”；

 

2：自定义转码设置：

 

1、视频需经过加密在进行发布，先创建一个编码模板（配置如下）：

1. 容器：选择 HLS（Http Live Streaming）；
2. 编码规格：high高；
3. 分辨率 （视频码率）：1920_1080 （2500） ，2180_720 （1024） ，800*600 （512）等；
4. 加密策略：Token；

 

 

 

2、进入 媒资管理 进行视频上传，选择 自定义转码模板组：

 

 二：视频的播放

 

1、后端代码

 

1. 获取 ‘tokon’ 的值（参照官方文档：https://cloud.baidu.com/doc/VOD/BestPractise.html#token.E8.AE.A1.E7.AE.97.E8.A7.84.E5.88.99）

   # 获取tokon；
   def course_token(request):
       # video：是视频文件的完整链接
       file = request.GET.get('video')
       # 过期时间；
       expiration_time = int(time.time()) + 2 * 60 * 60
   
       USER_ID = settings.BAIDU_CLOUD_USER_ID
       USER_KEY = settings.BAIDU_CLOUD_USER_KEY
   
       # file=http://hemvpc6ui1kef2g0dd2.exp.bcevod.com/mda-igjsr8g7z7zqwnav/mda-igjsr8g7z7zqwnav.m3u8
       # 先获取扩展名；再通过‘/’分割取最后一个值，并将扩展名替换为空字符串；得到‘ID’；
       extension = os.path.splitext(file)[1]
       media_id = file.split('/')[-1].replace(extension, '')
   
       # 将‘USER_KEY’进行编码；后面的‘hmac.new()’只能接受bytes类型；
       # unicode->bytes=unicode.encode('utf-8')bytes
       key = USER_KEY.encode('utf-8')
       message = '/{0}/{1}'.format(media_id, expiration_time).encode('utf-8')
   
       # signature：生成签名；
       # disgestmod：指定加密方式；
       signature = hmac.new(key, message, digestmod=hashlib.sha256).hexdigest()
       token = '{0}_{1}_{2}'.format(signature, USER_ID, expiration_time)
       return restful.result(data={'token': token})

   （url 映射地址：cms/course_token）

 

 

2、前端代码

 

1. 下载 videojs 文件：http://sdk.bce.baidu.com/media-sdk/Baidu-T5Player-SDK-Web-v3.4.0.zip；
2. 将 videojs 文件的 js 文件添加到项目文件目录中，以便 HTML模板 引用；

   <!-- HTML中需引用的文件 -->
       <script src="{% static 'videojs/video.min.js' %}"></script>
       <script src="{% static 'videojs/videojs-contrib-hls.min.js' %}"></script>
       <script src="{% static 'videojs/videojs-contrib-quality-levels.min.js' %}"></script>
   
       <!-- 加载播放器 -->
       <script type="text/javascript" src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>
   
       <!-- 初始化播放器的 js 文件 -->
       <script src="{% static 'js/cms/course_detail.min.js' %}"></script>

    

3. 并创建一个用来加载视频的容器；

   <div class="video-group">
       <span id="video-info" hidden data-video-url="{{ course.video_url }}"
             data-cover-url="{{ course.cover_url }}"></span>
       <!-- 用来存储播放器 -->
       <div id="playercontainer"></div>
   </div>

    

4. 通过 js 初始化播放器，并传递视频地址；

   function CourseDetail() {
   
   }
   
   // 视频播放；
   CourseDetail.prototype.initPlayer = function () {
       var videoInfoSpan = $('#video-info');
       var video_url = videoInfoSpan.attr('data-video-url');
       var cover_url = videoInfoSpan.attr('data-cover-url');
       var player = cyberplayer("playercontainer").setup({
           width: '100%',
           height: '100%',
           file: video_url,            // 视频链接；
           image: cover_url,           // 封面图链接；
           autostart: false,           // 是否自动播放；
           stretching: 'uniform',      // 扩大；
           repeat: false,              // 是否重复；
           volume: 100,                // 音量；
           controls: true,             // 底部控制栏；
           primary: "flash",           // 使用flash；
           tokenEncrypt: true,         // 采用token加密；
           ak: '86dc62e1dbd4455080ab1cfc5e587b17', // AccessKey;
       });
       
       // 视频播放前的事件；
       player.on('beforePlay', function (e) {
           if (!/m3u8/.test(e.file)) {
               return;
           }
           xfzajax.get({
               'url': '/course/course_token/',
               'data': {
                   'video': video_url
               },
               'success': function (result) {
                   if (result['code'] === 200) {
                       var token = result['data']['token'];
                       // 将‘tokon’设置入‘player’中，使播放器获取视频密码；
                       player.setToken(e.file, token);
                   } else {
                       alert('token错误！')
                   }
               },
               'fail': function (error) {
                   console.log(error)
               }
           })
       })
   };
   
   CourseDetail.prototype.run = function () {
       this.initPlayer();
   };
   
   $(function () {
       var course = new CourseDetail();
       course.run()
   });

    

 

三、购买视频及播放；

 

1、使用 PaysApi 

1. 文档的使用及说明：https://www.paysapi.com/docindex；
2. 发起付款接口的说明文档：https://www.paysapi.com/docpay；

 

2、代码

1. Models及HTML模板

   # 支付页面模板；
   class CourseOrder(models.Model):
       uid = ShortUUIDField(primary_key=True)
       course = models.ForeignKey("Course",on_delete=models.DO_NOTHING)
       buyer = models.ForeignKey("xfzauth.User",on_delete=models.DO_NOTHING)
       amount = models.FloatField(default=0)
       pub_time = models.DateTimeField(auto_now_add=True)
       # 支付渠道：1：代表支付宝支付；2：代表微信支付；
       istype = models.SmallIntegerField(default=1)
       # 支付状态：1：代表未支付；2：代表支付成功；
       status = models.SmallIntegerField(default=1)

   <!-- 部分相关HTML模板 -->
   <form action="https://pay.bbbapi.com/" method="post" id="pay-form">
       <input type="hidden" name="uid" value="49dc532695baa99e16e01bc0">
       <input type="hidden" name="price" value="{{ course.price }}">
       <input type="hidden" name="notify_url" value="{{ notify_url }}">
       <input type="hidden" name="return_url" value="{{ return_url }}">
       <input type="hidden" name="orderid" value="{{ order.pk }}">
       <input type="hidden" name="orderuid" value="{{ request.user.pk }}">
       <input type="hidden" name="goodsname" value="{{ course.title }}">
       <input type="hidden" name="key" value="">
       <!-- 微信与支付宝支付 -->
       <div class="pay-way">
           <label for="istype-wx" class="label">
               <input id="istype-wx" type="radio" name="istype" value="2">
               <span class="wx-btn fk-btn">
               <img src="http://nos.netease.com/test-edu-image/1BD9F69D6760CE1508D2269864AA54F8.png" alt="">
           </span>
           </label>
           <label for="istype-zfb" class="label">
               <input id="istype-zfb" type="radio" name="istype" value="1" checked>
               <span class="zfb-btn fk-btn"></span>
           </label>
           <div style="clear: both;"></div>
       </div>
       <div class="submit-group">
           <input type="submit" value="去支付" id="submit-btn" class="submit-btn">
       </div>
   </form>

    

2. 获取“key”值

   from utils import restful
   from apps.xfzauth.decorators import xfz_login_required
   from hashlib import md5
   
   # 获取“key”；用户登录的情况下；
   @xfz_login_required
   def course_order_key(request):
       goodsname = request.POST.get("goodsname")       # 商品名称;
       istype = request.POST.get("istype")             # 支付渠道；
       notify_url = request.POST.get("notify_url")     # 通知回调网址；
       orderid = request.POST.get("orderid")           # 商户自定义订单号；
       orderuid = str(request.user.pk)                 # 商户自定义客户号；
       price = request.POST.get("price")               # 价格；
       return_url = request.POST.get("return_url")     # 跳转网址；
   
       # 在官网个人账户设置中的“API接口信息”中获取“token”与“uid”的值:
       token = 'e6110f92abcb11040ba153967847b7a6'
       uid = '49dc532695baa99e16e01bc0'
   
       # 秘钥“key”的拼接顺序：goodsname + istype + notify_url + orderid + orderuid + price + return_url + token + uid
       key = md5((goodsname + istype + notify_url + orderid + orderuid + price + return_url + token + uid).encode(
           "utf-8")).hexdigest()
       return restful.result(data={"key": key})

    

3. 购买课程

   # 购买课程；
   @xfz_login_required
   def course_order(request, course_id):
       course = Course.objects.get(pk=course_id)
       order = CourseOrder.objects.create(course=course, buyer=request.user, status=1, amount=course.price)
       context = {
           'course': course,
           'order': order,
           # 跳转链接：/course/notify_url/；
           'notify_url': request.build_absolute_uri(reverse('course:notify_view')),
           'return_url': request.build_absolute_uri(reverse('course:course_detail', kwargs={"course_id": course.pk}))
       }
       return render(request, 'course/course_order.html', context=context)
   
   # 使用订单ID更新支付状态；（关闭CSRF保护）
   @csrf_exempt
   def notify_view(request):
       orderid = request.POST.get('orderid')
       CourseOrder.objects.filter(pk=orderid).update(status=2)
       return restful.ok()

    

4. 前端“js”文件

   function CourseOrder() {
   
   }
   
   CourseOrder.prototype.run = function () {
       this.OrderEvent();
   };
   
   // 订购事件；（发起付款接口时需处理的数据）
   CourseOrder.prototype.OrderEvent = (function () {
       var submitBtn = $("#submit-btn");
       submitBtn.click(function (event) {
           event.preventDefault();
           var goodsname = $("input[name='goodsname']").val();
           var istype = $("input[name='istype']:checked").val();
           var notify_url = $("input[name='notify_url']").val();
           var orderid = $("input[name='orderid']").val();
           var price = $("input[name='price']").val();
           var return_url = $("input[name='return_url']").val();
           xfzajax.post({
               'url': '/course/course_order_key/',
               'data': {
                   'goodsname': goodsname,
                   'istype': istype,
                   'notify_url': notify_url,
                   'orderid': orderid,
                   'price': price,
                   'return_url': return_url
               },
               'success': function (result) {
                   if(result['code'] === 200){
                       var key = result['data']['key'];
                       var keyInput = $("input[name='key']");
                       keyInput.val(key);
                       $("#pay-form").submit();
                   }
               }
           });
       });
   });
   
   $(function () {
       var order = new CourseOrder();
       order.run();
   });