视频的上传及购买播放

一、上传视频

1：使用百度云：

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

2：自定义转码设置：

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

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

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

二：视频的播放

1、后端代码

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

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

（url 映射地址：cms/course_token）

2、前端代码

下载 videojs 文件：http://sdk.bce.baidu.com/media-sdk/Baidu-T5Player-SDK-Web-v3.4.0.zip；

将 videojs 文件的 js 文件添加到项目文件目录中，以便 HTML模板 引用；

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

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

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

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

 1 function CourseDetail() {
 2
 3 }
 4
 5 // 视频播放；
 6 CourseDetail.prototype.initPlayer = function () {
 7     var videoInfoSpan = $('#video-info');
 8     var video_url = videoInfoSpan.attr('data-video-url');
 9     var cover_url = videoInfoSpan.attr('data-cover-url');
10     var player = cyberplayer("playercontainer").setup({
11         width: '100%',
12         height: '100%',
13         file: video_url,            // 视频链接；
14         image: cover_url,           // 封面图链接；
15         autostart: false,           // 是否自动播放；
16         stretching: 'uniform',      // 扩大；
17         repeat: false,              // 是否重复；
18         volume: 100,                // 音量；
19         controls: true,             // 底部控制栏；
20         primary: "flash",           // 使用flash；
21         tokenEncrypt: true,         // 采用token加密；
22         ak: '86dc62e1dbd4455080ab1cfc5e587b17', // AccessKey;
23     });
24
25     // 视频播放前的事件；
26     player.on('beforePlay', function (e) {
27         if (!/m3u8/.test(e.file)) {
28             return;
29         }
30         xfzajax.get({
31             'url': '/course/course_token/',
32             'data': {
33                 'video': video_url
34             },
35             'success': function (result) {
36                 if (result['code'] === 200) {
37                     var token = result['data']['token'];
38                     // 将‘tokon’设置入‘player’中，使播放器获取视频密码；
39                     player.setToken(e.file, token);
40                 } else {
41                     alert('token错误！')
42                 }
43             },
44             'fail': function (error) {
45                 console.log(error)
46             }
47         })
48     })
49 };
50
51 CourseDetail.prototype.run = function () {
52     this.initPlayer();
53 };
54
55 $(function () {
56     var course = new CourseDetail();
57     course.run()
58 });

View Code

三、购买视频及播放；

1、使用 PaysApi

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

2、代码

Models及HTML模板

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

View Code

 1 <!-- 部分相关HTML模板 -->
 2 <form action="https://pay.bbbapi.com/" method="post" id="pay-form">
 3     <input type="hidden" name="uid" value="49dc532695baa99e16e01bc0">
 4     <input type="hidden" name="price" value="{{ course.price }}">
 5     <input type="hidden" name="notify_url" value="{{ notify_url }}">
 6     <input type="hidden" name="return_url" value="{{ return_url }}">
 7     <input type="hidden" name="orderid" value="{{ order.pk }}">
 8     <input type="hidden" name="orderuid" value="{{ request.user.pk }}">
 9     <input type="hidden" name="goodsname" value="{{ course.title }}">
10     <input type="hidden" name="key" value="">
11     <!-- 微信与支付宝支付 -->
12     <div class="pay-way">
13         <label for="istype-wx" class="label">
14             <input id="istype-wx" type="radio" name="istype" value="2">
15             <span class="wx-btn fk-btn">
16             <img src="http://nos.netease.com/test-edu-image/1BD9F69D6760CE1508D2269864AA54F8.png" alt="">
17         </span>
18         </label>
19         <label for="istype-zfb" class="label">
20             <input id="istype-zfb" type="radio" name="istype" value="1" checked>
21             <span class="zfb-btn fk-btn"></span>
22         </label>
23         <div style="clear: both;"></div>
24     </div>
25     <div class="submit-group">
26         <input type="submit" value="去支付" id="submit-btn" class="submit-btn">
27     </div>
28 </form>

View Code

获取“key”值

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

View Code

购买课程

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

View Code

前端“js”文件

 1 function CourseOrder() {
 2
 3 }
 4
 5 CourseOrder.prototype.run = function () {
 6     this.OrderEvent();
 7 };
 8
 9 // 订购事件；（发起付款接口时需处理的数据）
10 CourseOrder.prototype.OrderEvent = (function () {
11     var submitBtn = $("#submit-btn");
12     submitBtn.click(function (event) {
13         event.preventDefault();
14         var goodsname = $("input[name='goodsname']").val();
15         var istype = $("input[name='istype']:checked").val();
16         var notify_url = $("input[name='notify_url']").val();
17         var orderid = $("input[name='orderid']").val();
18         var price = $("input[name='price']").val();
19         var return_url = $("input[name='return_url']").val();
20         xfzajax.post({
21             'url': '/course/course_order_key/',
22             'data': {
23                 'goodsname': goodsname,
24                 'istype': istype,
25                 'notify_url': notify_url,
26                 'orderid': orderid,
27                 'price': price,
28                 'return_url': return_url
29             },
30             'success': function (result) {
31                 if(result['code'] === 200){
32                     var key = result['data']['key'];
33                     var keyInput = $("input[name='key']");
34                     keyInput.val(key);
35                     $("#pay-form").submit();
36                 }
37             }
38         });
39     });
40 });
41
42 $(function () {
43     var order = new CourseOrder();
44     order.run();
45 });

View Code

转载于:https://www.cnblogs.com/liqiongming/p/11016434.html

视频的上传及购买播放相关推荐

大文件切片上传、视频切片上传转m3u8播放
一.故事前不久干项目,涉及到在线学习,简单来说就是对文章.视频进行在线学习,这个时候问题出现了,就是在上传视频的时候,速度很是慢,除此之外,视频播放也是卡的鸭皮,然后就开始疯狂网上搜刮知识,最终解决 ...
java+阿里云中的视频点播实现视频的上传和播放
一,开通阿里云视频点播 1,打开阿里云搜索"视频点播" 2,开通服务查看两种付费方式的区别(了解其他付费项目): https://www.aliyun.com/price/pro ...
腾讯视频下载转mp4_腾讯视频如何上传自己的视频
今天小编给广大用户分享腾讯视频下载转mp4_腾讯视频如何上传自己的视频.现在小视频.Vlog正发展地如火如荼,这是一个人人都能做自媒体,人人都能输出内容的时代,腾讯视频也是其中的一个平台.这篇经验就来 ...
搜狐视频如何上传原创视频
很多人都使用搜狐视频,小编给大家分享一下搜狐视频如何上传原创视频相关内容.搜狐视频打造涵盖电影.电视剧.综艺.动漫在内的十余种类型的丰富的正版视频内容库,让搜狐视频进入真正意义上的全类别.高品质时代. ...
腾讯视频怎么上传自己的视频？
腾讯视频,是定坐落于中国最大视频在线网络媒体,另外也是一款视频播放器.其以丰富多彩的內容.完美的收看感受.方便快捷的登陆方法.二十四小时多服务平台无缝拼接运用感受及其便捷共享的产品特性,满足客户需求在 ...
腾讯视频下载安装免费装到手机_腾讯视频怎么上传个人本地视频
不管这个腾讯视频好用与否,都有一大批用户,本文播放器家园网小编分享腾讯视频下载安装免费装到手机_腾讯视频怎么上传个人本地视频.VIP会员频道聚合海量VIP品质内容,连续签到解锁惊喜奖励.摇一摇抽VIP ...
腾讯视频下载安装链接_腾讯视频怎么上传视频
今天继续给大家分享腾讯视频方面的内容.腾讯视频播放器是腾讯视频官方推出的一款视频客户端,致力于为用户提供高清.流畅.丰富的专业视频服务,在这里您可在线享受腾讯视频网站内全部免费高清正版视频.使用腾讯视 ...
PHP如何有效实现多视频同时上传功能
视频的出现让网站更加有生有色,对于php上传视频而言,我需要实现多视频上传,视频播放功能,静音功能,全屏播放,下载视频功能等一体的需求,接下来就为大家详细讲解一下如何实现多视频同时上传这样一个功能.具 ...
抖音开放平台-视频切片-视频分片上传-不合法的参数ID-不合法的对象ID
问题描述 1.最近遇到个问题,做业务需要管理几个抖音账号,用抖音开放平台做分片上传视频,多次返回不合法参数id,提交工单之后给的回复没有任何参考价值. 2.例如视频文件按15M进行切片,调用分片上传初 ...

视频的上传及购买播放

视频的上传及购买播放相关推荐

最新文章

热门文章