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

野性酷女 2021-12-11 05:41 766阅读 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 条评论，766人围观）

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

相关阅读

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

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

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

相关小程序播放腾讯视频

近开发遇到了在小程序中播放腾讯视频的问题,就发现了一篇比较好用的文章推荐一篇比较好的文章： [http://m.zhizuobiao.com/weixin/weix...

心已赠人/ 2024年04月17日 21:05/ 0 赞/ 300 阅读

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

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

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

相关获取video视频播放长度

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

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

相关 kali安装腾讯视频

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关腾讯视频的地址解析下载

以腾讯视频播放页地址[http://v.qq.com/x/cover/rz4mhb6494f12co.html][http_v.qq.com_x_cover_rz4mhb649

我会带着你远行/ 2021年10月28日 20:10/ 0 赞/ 1545 阅读