Vue中Video标签播放解析后短视频去水印无响应解决

目录
  • 问题：
    • 情景复现:
    • 链接在Video标签打不开
    • 链接浏览器正常打开
    • 出现的原理
  • 解决方式
    • 前端解决
    • 全局添加标签
    • Vue单页面添加标签
    • 完美解决:

问题：

发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中，后端已经可以把解析后的访问地址返回，通过浏览器访问该地址也是没有问题的，接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url

情景复现:

前端发送请求到后端接口

我们前端打印获取后端解析后的对象信息

链接在Video标签打不开

我们在查看元素标签

可以看出src已经被替换成了正确的播放地址,那为什么视频没有播放,何况我已经对video标签里面的属性添加了autoplay="autoplay"那应该会直接被播放,并且我点击视频界面也没反应

链接浏览器正常打开

把后端地址复制出来访问看看有没有可能是地址的原因,可以看出浏览器可以正常播放但是地址栏的链接好像发生了改变

出现的原理

可以知道访问的链接应该重新提交到了短视频服务器获取真实播放地址,其实控制台有打印错误的信息提示

所以验证了访问的链接会重新提交到了短视频服务器获取真实播放地址
那403 (Forbidden)错误是啥呢?翻译过来就是被禁止访问的意思,如果是找不到会出现404标识

那为什么会禁止,我们可以通过F12调用出控制面板,我前面看控制台打印就已经调出来了,我们可以看网络(英文状态是:Network)查看报红的链接就是没被请求成功的

那就要看我们请求信息携带了那些数据到服务端,请求头类型介绍

第一眼看过去不说别的这个关键字Referer: http://localhost/携带的地址是我们本地,我们去搜索这个关键字查看介绍

那问题就出现在,这里服务端是不是可以通过这个请求查看属性,此次请求是通过那个界面访问过来的,这个时候他们后台会不会有这个判断,如果存在这个Referer关键字,在判断下这个链接地址是否是短视频平台的的地址,如果是就放行,如果不是就禁止访问呢,我们也可以查看直接通过浏览器访问请求地址都带了啥

可以看出请求的值带了很多到服务端

可以看出浏览器访问没有携带Referer关键字,是不是可以想下前面我说的那个逻辑是否正确,不卖关子了,就是这个关键字影响到了!

解决方式

前端解决

我们只需要在界面头里面添加以下标签,意思是所有请求不发送 Referer关键字

<meta name=referrer content=no-referrer>

全局添加标签

我这种方式是全局页面都添加了以下标签,因为我是在public包下的index.html中添加的这个是最简单的

Vue单页面添加标签

给Vue单页面添加meta标签需要3个步骤:

1.安装模块:

npm install vue-meta --save

2.引用vue-meta模块

main.js添加以下代码

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

3.页面设置meta信息

  metaInfo: {
    title: 'This is the video',
    meta: [
      { charset: 'utf-8' },
      { name: 'referrer', content: 'no-referrer' }
    ]
  }

完美解决:

以上就是Vue项目Video标签播放解析后短视频去水印视频无响应的详细内容，更多关于Video标签解析短视频去水印无响应的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 如何在vue中使用video.js播放m3u8格式的视频

    如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    监控设备播放效果如下 1.vue项目安装vue-video-player npm install vue-video-player --save 2.编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了,具体操作有注释) 注:style样式部分用了lang=scss,如果自己的项目没用他请用自己的方式改一下样式部分避免报错 <template> <div class="video-js&q

  • 适用于 Vue 的播放器组件Vue-Video-Player操作

    如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 配置参数:

  • vue-video-player视频播放器使用配置详解

    本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下 1.安装 npm install vue-video-player -save 2.在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频播放器 import 'video.js/dist/video-js.css' Vue.use(VueVideoPlayer) 3.新建一个vueVideoPlayer.vue组件供调用 <

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

    本文项目为大家分享了Vue使用video标签实现视频播放的具体代码,供大家参考,具体内容如下 项目需求:动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue-video-player 组件,其原因为 封装功能齐全.播放源兼容性好等. 通过这次项目需求,也深入的学习了 video 标签的属性及方法.具体在这里跟大家分享一下. 具体使用方法如下 <template> <!-- Video组件 --> <di

  • Vue中Video标签播放解析后短视频去水印无响应解决

    Vue中Video标签播放解析后短视频去水印无响应解决

    目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打

  • Vue中video标签如何实现不静音自动播放

    由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放,也就是说如果想让video标签能够自动播放必须给video标签添加muted属性. 但是在开发的过程中我们需要用视频自动有声播放,比如一些学习网站,需要老师或同学进入页面就可以播放学习视频,那么如何去实现呢? 我是在Vue框架下实现的,其他框架仅供参考. 首先我们要让video标签能够自动播放,也就是让video标签静音条件下自动播放. <video ref="videoPlayer" id="vide

  • 详解vue中router-link标签所必备了解的属性

    to 表示目标路由的链接. 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象. <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home" rel="external nofollow" >Home</a

  • vue中 $forceUpdate的使用解析

    目录 方案分析 forceUpdate 本质 实现原理 分析 刷新页面 使用v-if标记 key-changing 在vue的开发过程中,数据的绑定通常来说都不用我们操心,例如在​​data​​中有一个​​msg​​的变量,只要修改它,那么在页面上,​​msg​​的内容就会自动发生变化.但是如果对于一个复杂的对象,例如一个对象数组,直接去给数组上某一个元素增加属性,或者直接把数组的​​length​​变成0,vue可能就无法知道发生了改变.这个其实就是考验对于双向绑定的更进一步的理解应用了.在V

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • 解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题

    如下所示: let name = 'www.baidu.com/' <a :href="name" rel="external nofollow" > 点击跳转到: localhost:8080/www.baidu.com/ 解决: 写成<a :href="'https//:'+name" rel="external nofollow" > 补充知识:问题:vue.js a标签href里有变量,函数拼接

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • Vue中el-form标签中的自定义el-select下拉框标签功能

    Vue中el-form标签中的自定义el-select下拉框标签功能

    页面写死el-select下拉框标签: 通过v-for="item in stateArr"绑定,stateArr声明在Vue组件里面的data参数里面代码如下: 到此这篇关于Vue中el-form标签中的自定义el-select下拉框标签功能的文章就介绍到这了,更多相关Vue el-form标签 自定义el-select下拉框标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

随机推荐