阿里云盘视频m3u8播放-python+vue3实现

如图，先看看效果

实现方式

1. 通过api获取视频相关m3u8地址,并进行分析（web版可通过调试模式查看）

结果如下

{"domain_id": "bj29","drive_id": "650296441","file_id": "63857a5ce3abce4520f84562b13025174c070455","video_preview_play_info": {"category": "live_transcoding","meta": {"duration": 1948.565,"width": 1920,"height": 804,"live_transcoding_meta": {"ts_segment": 10,"ts_total_count": 195,"ts_pre_count": 3}},"live_transcoding_task_list": [{"template_id": "SD","template_name": "pdsSD","template_width": 960,"template_height": 540,"status": "finished","stage": "stage_all","url": "https://ccp-bj29-video-preview.oss-enet.aliyuncs.com/lt/8E5DB0912CE1598D006840896CA15A958DAF92B1_272593777__sha1_bj29/SD/media.m3u8?di=bj29&dr=650296441&f=63857a5ce3abce4520f84562b13025174c070455&security-token=CAIS%2BgF1q6Ft5B2yfSjIr5bvMt%2FTg5xZg7SpW0XIszIMaMlHuPTKuDz2IHFPeHJrBeAYt%2FoxmW1X5vwSlq5rR4QAXlDfNQDEHS%2FzqVHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLukMWr%2Fwq3PIdp2ma447NWQlLnzyCMvvJ9OVDFyN0aKEnH7J%2Bq%2FzxhTPrMnpkSlacGoABbS5XKPjPcw392n9aHLm5OsD0KUn%2Bu79doqjgQ%2B1kAmRACx4%2BIxJ0fPW4a%2Fso83ckeFioW7U%2Fg%2B9PzOSsbGXjM700r1nvfDenlXX%2B2GPOXjhd8S%2BMYi0GlJq5mZJAYNCh%2BELs8D5H45hN6DkC6aSP%2FLBmyoGipqJ9gwyK%2BxXZki8%3D&u=d636c4f1ca374695af84e6c6ea118436&x-oss-access-key-id=STS.NUZyegnCx4vBYcyW2YdFkW1aZ&x-oss-expires=1669723761&x-oss-process=hls%2Fsign&x-oss-signature=UXkAh73fYqPHxryhD5M9ZWaOnpkxSpNrFjAeWOEcVDw%3D&x-oss-signature-version=OSS2"}, {"template_id": "HD","template_name": "pdsHD","template_width": 1280,"template_height": 720,"status": "finished","stage": "stage_all","url": "https://ccp-bj29-video-preview.oss-enet.aliyuncs.com/lt/8E5DB0912CE1598D006840896CA15A958DAF92B1_272593777__sha1_bj29/HD/media.m3u8?di=bj29&dr=650296441&f=63857a5ce3abce4520f84562b13025174c070455&security-token=CAIS%2BgF1q6Ft5B2yfSjIr5bvMt%2FTg5xZg7SpW0XIszIMaMlHuPTKuDz2IHFPeHJrBeAYt%2FoxmW1X5vwSlq5rR4QAXlDfNQDEHS%2FzqVHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLukMWr%2Fwq3PIdp2ma447NWQlLnzyCMvvJ9OVDFyN0aKEnH7J%2Bq%2FzxhTPrMnpkSlacGoABbS5XKPjPcw392n9aHLm5OsD0KUn%2Bu79doqjgQ%2B1kAmRACx4%2BIxJ0fPW4a%2Fso83ckeFioW7U%2Fg%2B9PzOSsbGXjM700r1nvfDenlXX%2B2GPOXjhd8S%2BMYi0GlJq5mZJAYNCh%2BELs8D5H45hN6DkC6aSP%2FLBmyoGipqJ9gwyK%2BxXZki8%3D&u=d636c4f1ca374695af84e6c6ea118436&x-oss-access-key-id=STS.NUZyegnCx4vBYcyW2YdFkW1aZ&x-oss-expires=1669723761&x-oss-process=hls%2Fsign&x-oss-signature=xOZom4mrmiGuALYAIMH%2Bo4ONoG%2FgaXGzFMqgx74EgoE%3D&x-oss-signature-version=OSS2"}, {"template_id": "FHD","template_name": "pdsFHD","template_width": 1920,"template_height": 1080,"status": "finished","stage": "stage_all","url": "https://ccp-bj29-video-preview.oss-enet.aliyuncs.com/lt/8E5DB0912CE1598D006840896CA15A958DAF92B1_272593777__sha1_bj29/FHD/media.m3u8?di=bj29&dr=650296441&f=63857a5ce3abce4520f84562b13025174c070455&security-token=CAIS%2BgF1q6Ft5B2yfSjIr5bvMt%2FTg5xZg7SpW0XIszIMaMlHuPTKuDz2IHFPeHJrBeAYt%2FoxmW1X5vwSlq5rR4QAXlDfNQDEHS%2FzqVHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLukMWr%2Fwq3PIdp2ma447NWQlLnzyCMvvJ9OVDFyN0aKEnH7J%2Bq%2FzxhTPrMnpkSlacGoABbS5XKPjPcw392n9aHLm5OsD0KUn%2Bu79doqjgQ%2B1kAmRACx4%2BIxJ0fPW4a%2Fso83ckeFioW7U%2Fg%2B9PzOSsbGXjM700r1nvfDenlXX%2B2GPOXjhd8S%2BMYi0GlJq5mZJAYNCh%2BELs8D5H45hN6DkC6aSP%2FLBmyoGipqJ9gwyK%2BxXZki8%3D&u=d636c4f1ca374695af84e6c6ea118436&x-oss-access-key-id=STS.NUZyegnCx4vBYcyW2YdFkW1aZ&x-oss-expires=1669723761&x-oss-process=hls%2Fsign&x-oss-signature=K5t%2Fe3zHSTVmsJNxUoVi1giCTC4sSTqM6mF5rDyYuM4%3D&x-oss-signature-version=OSS2","keep_original_resolution": true}]}
}

可以看到，共有三种分辨率可选择，但是阿里云盘并没有提供分辨率列表的m3u8文件，因此，需要我们自己实现该文件

2.通过Python读取不同分辨率下载连接，并拼接成相应的文件

def quoted(string):return '"%s"' % stringclass StreamInfo(object):bandwidth = Noneprogram_id = Noneresolution = Nonecodecs = Nonename = Nonedef __init__(self, **kwargs):self.bandwidth = kwargs.get("bandwidth")self.program_id = kwargs.get("program_id")self.resolution = kwargs.get("resolution")self.codecs = kwargs.get("codecs")self.name = kwargs.get("name")def __str__(self):stream_inf = []if self.program_id is not None:stream_inf.append('PROGRAM-ID=%d' % self.program_id)if self.bandwidth is not None:stream_inf.append('BANDWIDTH=%d' % self.bandwidth)if self.resolution is not None:stream_inf.append('RESOLUTION=' + self.resolution)if self.codecs is not None:stream_inf.append('CODECS=' + quoted(self.codecs))if self.name is not None:stream_inf.append('NAME=' + self.name)return ",".join(stream_inf)def format_m3u8_data(preview_play_info: List[LiveTranscodingTask]):start_str = '#EXTM3U'for preview in preview_play_info:if preview.status == 'finished':if preview.template_id == 'SD':stream_inf = StreamInfo(bandwidth=836280, program_id=1, codecs="mp4a.40.2,avc1.64001f",name=preview.template_name,resolution=f"{preview.template_width}x{preview.template_height}")elif preview.template_id == 'HD':stream_inf = StreamInfo(bandwidth=2149280, program_id=1, codecs="mp4a.40.2,avc1.64001f",name=preview.template_name,resolution=f"{preview.template_width}x{preview.template_height}")elif preview.template_id == 'FHD':stream_inf = StreamInfo(bandwidth=6221600, program_id=1, codecs="mp4a.40.2,avc1.640028",name=preview.template_name,resolution=f"{preview.template_width}x{preview.template_height}")else:stream_inf = StreamInfo(bandwidth=460560, program_id=1, codecs="mp4a.40.5,avc1.420016",name=preview.template_name,resolution=f"{preview.template_width}x{preview.template_height}")start_str += '\n#EXT-X-STREAM-INF:' + str(stream_inf) + '\n' + preview.urlreturn start_strdef get_video_m3u8(file_obj: FileInfo, template_id='FHD|HD|SD|LD'):drive_obj = AliyunDrive.objects.filter(active=True, enable=True, access_token__isnull=False,pk=file_obj.aliyun_drive_id.pk).first()if drive_obj:ali_obj: Aligo = get_aliyun_drive(drive_obj)result = ali_obj.get_video_preview_play_info(file_id=file_obj.file_id, drive_id=file_obj.drive_id,template_id=template_id)return format_m3u8_data(result.video_preview_play_info.live_transcoding_task_list[::-1])

view实现

from io import BytesIO
from wsgiref.util import FileWrapperfrom django.http import FileResponse
from django.views import Viewclass M3U8View(View):def get(self, request, file_id):token = request.GET.get('token')if token and file_id and verify_token(token, file_id, success_once=False):instance = FileInfo.objects.filter(file_id=file_id, category='video').first()if instance:m3u8_data = get_video_m3u8(instance)buffer = BytesIO(m3u8_data.encode('utf-8'))m3u8_file = FileWrapper(buffer)response = FileResponse(m3u8_file)response['Content-Type'] = "audio/mpegurl"return responsereturn ApiResponse(msg='error')

然后通过http接口，请求内容如下

3.前端通过vue实现，使用的是 vue3-video-play 插件

插件github: GitHub - xdlumia/vue3-video-play: 适用于 Vue3 的 hls.js 播放器组件，配置丰富，界面还算好看

定义视屏页面

<template><el-dialog v-model="showVisible" :close-on-click-modal="false" :title="videoTitle" center destroy-on-close draggablewidth="850px"><video-play:src="videoSrc"v-bind="videoOptions"/></el-dialog>
</template><script>
import 'vue3-video-play/dist/style.css'
import {videoPlay} from 'vue3-video-play'export default {name: "PreviewVideo",data() {return {videoOptions: {width: "800px", //播放器高度height: "450px", //播放器高度color: "#409eff", //主题色title: "", //视频名称type: "m3u8",// src: "",muted: false, //静音webFullScreen: false,speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速autoPlay: false, //自动播放loop: false, //循环播放mirror: false, //镜像画面lightOff: false, //关灯模式volume: 0.3, //默认音量大小control: true, //是否显示控制controlBtns: ["audioTrack","quality","speedRate","volume","setting","pip","pageFullScreen","fullScreen",], //显示所有按钮,},}},computed: {showVisible: {get() {return this.videoVisible},set(value) {this.$emit('update:videoVisible', value)}}},props: {videoVisible: {},videoTitle: {type: String,default: '',},videoSrc: {type: String,require: true,}}, methods: {}, watch: {}, components: {videoPlay}, mounted() {}
}
</script><style scoped></style>

代码已经开源，全部代码参考 GitHub - nineaiyu/xshare: 基于阿里云盘的文件分享平台

阿里云盘视频m3u8播放-python+vue3实现相关推荐

群晖/Linux挂载阿里云盘实现Emby播放，打造属于自己的家庭影院！
现目前硬盘的价格还是很贵,现阿里云盘各种玩法逐渐上线,今天就带大家玩一下挂载阿里云盘实现Emby播放. 准备由于挂载阿里云盘的实现依赖于搭建阿里云盘webdav协议,所以没有搭建的童鞋可以看看下面的 ...
阿里云盘三月自动签到Python脚本，可本地、青龙、云函数自动执行
阿里云盘自动签到脚本引言准备工作运行脚本本地运行下载脚本配置 python 运行环境安装依赖运行脚本运行结果青龙面板运行新增订阅安装依赖添加环境变量运行脚本注意本文博客 ...
用 Python 抓取阿里云盘资源
文 | 某某白米饭来源:Python 技术「ID: pythonall」前阵子阿里云盘大火,送了好多的容量空间.而且阿里云盘下载是不限速,这点比百度网盘好太多了.这两天看到一个第三方网站可以搜索阿 ...
极空间Docker安装Alist套件整合阿里云盘、百度云盘等网盘资源并挂载到本地供极影视刮削播放完整教程
文章目录 0.前言 1.在docker中安装alist套件 1.1.拉取并下载alist镜像 1.2.安装alist镜像 2.访问并设置alist 2.1.访问alist 2.2.配置alist 2. ...
互联网早报：阿里云盘 App 开始内测播放器投屏功能，部分用户可体验
行业热点 1.阿里云盘 App 开始内测播放器投屏功能,部分用户可体验: 2.微信灰度测试边写边译功能长按聊天框即可开启: 3.小米宣布成立机器人研究实验室公布仿生机器人"铁蛋" ...
Alist云盘视频加密助手：支持云盘视频文件加密与在线播放，不用再担心视频文件被和谐了！
转自:https://www.cnblogs.com/allvideo/p/17329494.html 在当前娱乐资源丰富的时代,人们每天都在接触各种视频资源.然而,网盘限速.版权审核.视频分级等问题 ...
python 网络文件传输(邮件+百度网盘(百度云盘)+阿里云盘)
邮件(以QQ邮箱为例) 发件人开启POP3/SMTP 邮箱设置->账户(新版本的在常规中)->POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务有的账号登陆 ...
阿里云盘，真的有点强
hello,大家好,我是Jackpop. 自从2021年3月22日,阿里云盘正式启动公测,到现在刚好有一年的时间了. 这一年来,我算是阿里云盘的重度用户了,使用频率远超过其他网盘. 备份手机相册.下载 ...
2023 最新一键下载百度网盘/阿里云盘/百度文库/道客巴巴/原创力文档
苏生不惑第415 篇原创文章,将本公众号设为星标,第一时间看最新文章. 之前分享过录制了个视频:2022年11月一键下载百度网盘/百度文库/豆丁/道客巴巴/原创力文档 ,2023年再更新下 . 爱奇艺 ...

阿里云盘视频m3u8播放-python+vue3实现

阿里云盘视频m3u8播放-python+vue3实现相关推荐

最新文章

热门文章