video标签在h5中被劫持问题

news2024/11/29 12:50:17

将video的视频链接转为blob


export const encryptionVideo = (options: URL) => {
    return new Promise((resolve, reject) => {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', options.url, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
            if (this.status == 200) {
                var blob = this.response;
                var u = window.URL.createObjectURL(blob);
                resolve(u);
            }
        };
        xhr.send();
    });
}

注:如果出现跨域问题需要在服务器上设置一下不让跨域 

视频标签中设置相应属性


<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放,也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置,
                     设置为 true 是防止横屏*/
  x5-video-orientation="portraint" //播放器支付的方向, landscape横屏,portraint竖屏,默认值为竖屏
  style="object-fit:fill">
</video>

更多信息:https://zhuanlan.zhihu.com/p/166014722?utm_id=0 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1256301.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

正则化与正则剪枝

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 引言正则化为什么会过拟合拉格朗日与正则化梯度衰减与正则化 应用解决过拟合网络剪枝 …

JPA 自关联 设置单向多对一

Spring boot 3 JPA中&#xff0c;遇到一个需求&#xff0c;建一个数据字典表&#xff1a; Dictionary&#xff0c;存放两级数据&#xff0c;第一级为字典项目&#xff0c;第二级为项目内容&#xff0c;查询时要把parent_id对应父项的名称也一起查出来&#xff0c;返回前端。 …

VUE简易计划清单

目录 效果预览图 完整代码 效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

Web前端 ---- 【Vue】什么?代码堆在一起不好维护?辛辛苦苦改造的单文件组件用不了?看我直接Vue Cli脚手架安排

目录 前言 单文件组件 什么是单文件组件 单文件组件的内容 Es6模块的导入和导出 创建单文件组件 Vue Cli脚手架 前言 继上篇文章Vue组件的使用介绍了如何使用Vue组件&#xff0c;但是发现有一个很重要的问题&#xff0c;就是代码复用性很差&#xff0c;并且无法提供样式…

文件的写入和读取操作

题目&#xff1a; 编写一个程序&#xff0c;实现以下功能&#xff1a; 1. 创建一个新的文本文件&#xff0c;并将用户输入的数据写入文件中。 2. 打开已存在的文本文件&#xff0c;并将其中的数据显示在屏幕上。 #include <stdio.h> #include <stdlib.h> void wri…

事件委派+自定义属性+编程式导航实现路由跳转及传参

当我们页面中有许多a标签需要实现点击跳转到同一个页面并携带不同的参数时&#xff0c;我们就可以使用事件委派自定义属性编程式导航 的方式&#xff0c;用最小的内存实现路由跳转的最大效率。 为什么我们不用router-link 进行跳转&#xff1f; 要知道&#xff0c;我们页面中…

汇编:关于栈的知识

1.入栈和出栈指令 2. SS与SP 3. 入栈与出栈 3.1 执行push ax ↑↑ 3.2 执行pop ax ↓↓ 3.3 栈顶超界的问题 4. 寄存器赋值 基于8086CPU编程时&#xff0c;可以将一段内存当作栈来使用。一个栈段最大可以设为64KB&#xff08;0-FFFFH&#xff09;。 1.入栈和出栈指令…

058-第三代软件开发-文件Model

第三代软件开发-文件Model 文章目录 第三代软件开发-文件Model项目介绍文件Model 关键字&#xff1a; Qt、 Qml、 关键字3、 关键字4、 关键字5 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Language&#xff09;…

[计算机网络]应用层概述

0.写在前面: 该层为教学模型的最后一层,某种意义上来说是最接近各位开发者的一层,正因如此,这层中的很多定义和概念大家都有属于自己的理解, 完全按照书本反而才是异类,因此在这里我会去结合我做前端开发的一些经验,来处理和讲解一些概念,另外本层中的部分协议也不会过多阐述了…

提升逼格,自己搭建博客网站不求人

背景 对于一个热爱分享知识和经验的大佬来说&#xff0c;搭建一个自己的个人博客是十分必要的。因为各个免费写博客平台都会有每天写博客限制&#xff0c;比如我现在这篇文章的限制&#xff0c;就是每天最多发表3篇&#xff0c;同时还给我的博客添加一大波广告&#xff0c;真是…

async函数和await关键字

async写在一个函数a前面&#xff0c;该函数变为异步函数&#xff0c;可在里面使用await关键字&#xff0c;await后面一般跟一个promise对象&#xff08;axios函数返回一个promise对象&#xff0c;里面有异步任务&#xff09;&#xff0c;await会原地等待该异步任务结果&#xf…

JVM基础篇:垃圾回收

1.前言 1.1C/C的内存管理 在C/C这类没有自动垃圾回收机制的语言中&#xff0c;一个对象如果不再使用&#xff0c;需要手动释放&#xff0c;否则就会出现内存泄漏。我们称这种释放对象的过程为垃圾回收&#xff0c;而需要程序员编写代码进行回收的方式为手动回收。内存泄漏指的…

WiFi 发射链路 MCS 自适应机制介绍

链路适配是指发射机选择最优的MCS向特定的接收机发送数据的过程。链路自适应算法的实现有其特殊性&#xff0c;但通常基于测量的数据包错误率(PER)。大多数算法监视PER并调整MCS以跟踪一个最佳的长期平均值&#xff0c;以平衡由于使用更高MCS发送更短数据包而减少的开销和由于更…

坚鹏:中国工商银行数字化背景下银行公司业务如何快速转型培训

中国工商银行作为全球最大的银行&#xff0c;资产规模超过40万亿元&#xff0c;最近几年围绕“数字生态、数字资产、数字技术、数字基建、数字基因”五维布局&#xff0c;深入推进数字化转型&#xff0c;加快形成体系化、生态化实施路径&#xff0c;促进科技与业务加速融合&…

jupyter notebook 添加conda环境变量为内核(kenel)

第一步&#xff1a;安装ipykernel 在激活环境后&#xff0c;需要安装ipykernel包&#xff0c;以便将Conda环境添加到Jupyter Notebook中。使用以下命令安装&#xff1a; pip install ipykernel第二步&#xff1a;将Conda环境添加到Jupyter 需要将Conda环境添加到Jupyter Not…

在拼多多,照见热气腾腾的平凡人生

文 | 螳螂观察 作者 | 易不二 内容丰富的《鲁迅日记》里&#xff0c;经常会出现“xx日晴&#xff0c;无事”的记载。 如果按照年份算&#xff0c;在被记载的日子里&#xff0c;每年鲁迅都有一二十天的时间是“无事”的状态。 很难想象&#xff0c;为人类历史文明前进照亮了…

2024年最新最全的Jmeter接口测试必会技能:jmeter对图片验证码的处理

jmeter对图片验证码的处理 在web端的登录接口经常会有图片验证码的输入&#xff0c;而且每次登录时图片验证码都是随机的&#xff1b;当通过jmeter做接口登录的时候要对图片验证码进行识别出图片中的字段&#xff0c;然后再登录接口中使用&#xff1b; 通过jmeter对图片验证码…

error LNK2038: 检测到“RuntimeLibrary”的不匹配项 解决方法

问题&#xff1a; 我们在使用Visual Studio编程的时候偶尔会遇到以下三种报错&#xff1a; error LNK2038: 检测到“RuntimeLibrary”的不匹配项: 值“MD_DynamicRelease”不匹配值“MDd_DynamicDebug” &#xff08;引用的是release模式&#xff0c;但设置成debug模式了…

知识点小总结

‘Integer(int)‘ 已经过时了 https://blog.csdn.net/qq_43116031/article/details/127793512 解决Java中的“找不到符号“错误 解决Java中的“找不到符号“错误_java: 找不到符号_很酷的站长的博客-CSDN博客 可右键打开 错误: 编码 UTF-8 的不可映射字符 错误: 编码 UTF-8 …

jQuery_06 过滤器的使用

什么是过滤器&#xff1f; 过滤器就是用来筛选dom对象的&#xff0c;过滤器是和选择器一起使用的。在选择了dom对象后在进行过滤筛选。 jQuery对象中存储的dom对象顺序与页面标签声明有关系。 声明顺序就是dom中存放的顺序 1.基本过滤器 使用dom对象在数组中的位置来作为过滤条…