vue通过腾讯视频url获取真实的video标签

野性酷女 2021-12-11 05:41 808阅读 0赞

直接上代码：

mounted() {
    let match = /vid=([^&]*)/.exec(this.article.source_url);
    if (match && match.length > 0) {
        let vid = match[1];
        let self = this;
        jsonp("http://vv.video.qq.com/getinfo?vids="+vid+"&platform=101001&charge=0&otype=json",null,(err,data)=>{
            let ul = data.vl.vi;
            if (ul.length >0) {
                let fn = ul[0].fn;
                let vkey = ul[0].fvkey;
                let uis = ul[0].ul.ui;
                self.sources = [];
                if (uis.length >0) {
                    uis.forEach((item,index)=>{
                        let url = item.url;
                        let source = {
                            src: url+fn+"?vkey="+vkey,
                            type: fn.indexOf("mp4")? "video/mp4": fn.indexOf("ogg") ? "video/ogg":"video/unknown"
                        };
                        self.sources.push(source);
                    });
                }
            }
        });
    }

\},

得到的都是分段的数据，组装起来最终得到：

<template>
    <video controls="controls" :poster="article.cover" controlslist="nodownload" preload="meta" x5-playsinline="true" playsinline="true" webkit-playsinline="true" id="videoid" @play="read">
        <source v-for="(item,key) in sources" :key="key" :src="item.src" :type="item.type">
    </video>

发表评论取消回复

表情：

评论列表（有 0 条评论，808人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序video组件播放腾讯视频等热门视频

腾讯视频的链接地址打开的页面，没有视频文件的地址，怎么在video组件中播放呢。这个需要对链接和页面做一些特别的处理，才能调取视频文件，进行视频播放。热门的还...

末蓝、/ 2024年04月17日 21:28/ 0 赞/ 352 阅读

相关 uni-app中引入腾讯视频插件，播放腾讯视频

配置微信小程序插件注意事项正式开始使用微信小程序插件之前需先在微信公众平台 -> 设置->第三方设置 -> 插件管理处添加插件 ![在这里插入图片

怼烎@/ 2023年05月29日 14:27/ 0 赞/ 121 阅读

相关如何获取腾讯视频的缩略图地址？

如何获取腾讯视频的缩略图地址？ 1.1 研发背景 1.2 解决方案 1.3 参考资料 1.1 研发背景在上一篇博文[Ja

﹏ヽ暗。殇╰゛Y/ 2023年02月27日 05:50/ 0 赞/ 64 阅读

相关 Vue 使用 video 标签实现视频播放

> 项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。 > 之前做视频播放时基本都是使用 vue-video-player

Bertha 。/ 2023年02月14日 00:29/ 0 赞/ 137 阅读

相关获取video视频播放长度

方法1 <video :src="videoUrl" controls preload="auto" id="videoPlayer"></video>

末蓝、/ 2023年01月13日 01:37/ 0 赞/ 350 阅读

相关 kali安装腾讯视频

kali安装腾讯视频下载地址 https://v.qq.com/download.htmllinux 安装

淡淡的烟草味﹌/ 2022年12月05日 12:05/ 0 赞/ 927 阅读

相关 vue 获取坐标及调用腾讯地图

addrHand() { let that = this console.log(that.jobsUserId) $.

水深无声/ 2022年09月12日 01:43/ 0 赞/ 474 阅读

相关腾讯云云点播通过videoid获取视频详情nodejs版

首先，安装express框架，目的，使用express框架请求，方便快捷参考 [https://www.npmjs.com/package/express][https_w

客官°小女子只卖身不卖艺/ 2022年09月09日 15:59/ 0 赞/ 490 阅读

相关 vue通过腾讯视频url获取真实的video标签

直接上代码： mounted() { let match = /vid=([^&])/.exec(this.article.source_url);

野性酷女/ 2021年12月11日 05:41/ 0 赞/ 809 阅读

相关如何提取腾讯视频的cookie？

什么是cookie？cookie就相当于一个身份证，比如说张三，中国有很多人叫张三，假设有一天你去坐高铁。那么你只需要拿出身份证，进站前刷一下就可以进去了。所以，其它的张...

朱雀/ 2021年12月05日 08:51/ 5 赞/ 21822 阅读