videojs是个不错的web播放器支持html5和hls并能够处理AES加密。七牛云号称也是一个不错的云平台,并能够在视频处理中有不错的体验,正在不断接触中,过程点滴记录。
使用videojs
代码展示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>videojs-contrib-hls embed</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/alt/video-js-cdn.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/video.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.0.2/videojs-contrib-hls.js"></script> </head> <body> <h1>Video.js Example Embed</h1> <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'> <source src="http://xxxxxxxxx.com/videohls640k.m3u8" type="application/x-mpegURL"> </video> <script> </script> </body> </html> |
重点:
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.0.2/videojs-contrib-hls.js"></script> |
这个是videojs的hls插件,只有引入了此文件,videojs才能够顺利播放m3u8
videojs-hls插件地址:https://github.com/videojs/videojs-contrib-hls
具体细节请看videojs官方网站:http://videojs.com/
在七牛云中准备m3u8
1.视频切片m3u8
在七牛云的【对象存储】->【内容管理】中,将MP4等格式的文件转码切片成m3u8需要的ts
得到文件本身的URL如下
http://xxxxxxxx.com/131c631517599311fc3cedca1dcd0f23.m3u8
2. 拼接URL
根据上面的URL拼接处如下新的URL:
http://xxxxxxxx.com/131c631517599311fc3cedca1dcd0f23.m3u8?pm3u8/0
七牛官方参考文档如下:
http://developer.qiniu.com/code/v6/api/dora-api/av/pm3u8.html
3. 获得私有资源可用的URL
http://xxxxxxxx.com/131c631517599311fc3cedca1dcd0f23.m3u8?pm3u8/0&e=1428550604&token=oErS_ptK1xIPrRi8vsrvBUAdlwWEjF2wMspBVMfz:UsNyIkEv5FC4Jp2T5kj_ALvqo2w=
获得下面此处字符串的方式是:
&e=1428550604&token=oErS_ptK1xIPrRi8vsrvBUAdlwWEjF2wMspBVMfz:UsNyIkEv5FC4Jp2T5kj_ALvqo2w=
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php require 'path_to_sdk/vendor/autoload.php'; // 引入鉴权类 use Qiniu\Auth; // 需要填写你的 Access Key 和 Secret Key $accessKey = 'Access_Key'; $secretKey = 'Secret_Key'; // 构建鉴权对象 $auth = new Auth($accessKey, $secretKey); //baseUrl构造成私有空间的域名/key的形式 $baseUrl = 'http://domain/key'; $authUrl = $auth->privateDownloadUrl($baseUrl); echo $authUrl; ?> |
更多信息请看:
http://developer.qiniu.com/code/v7/sdk/php.html#io-get
http://developer.qiniu.com/article/developer/security/download-token.html
4. 播放生成的链接
我们来看看,我们刚生成的连接都有什么吧。
得到的签过名的pm3u8文件
我们只需要替换videojs的source连接即可
1 2 3 4 5 6 7 8 9 |
<h1>Video.js Example Embed</h1> <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'> <source src="http://xxxxxxxx.com/131c631517599311fc3cedca1dcd0f23.m3u8?pm3u8/0&e=1428550604&token=oErS_ptK1xIPrRi8vsrvBUAdlwWEjF2wMspBVMfz:UsNyIkEv5FC4Jp2T5kj_ALvqo2w=" type="application/x-mpegURL"> </video> <script> </script> |