![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
文章平均质量分 50
学而时习之不亦说乎。
学海无涯
展开
-
vue内嵌iframe跨域通信
1、Vue组件中如何引入iframe?2、vue如何获取iframe对象以及iframe内的window对象?3、vue如何向iframe内传送信息?4、iframe内如何向外部vue发送信息?原创 2022-12-01 15:50:12 · 6219 阅读 · 3 评论 -
mp4,m3u8,rtsp,rtmp,flv,直播流在线测试地址
西瓜播放器测试视频: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv。前端做直播视频展示的时候,很多时候播放不出来,不是因为自己代码的问题,而是因为网上很多源。现在已经播放不出来了,所以源头都有问题,那自己的前端肯定就放不出来。以上是我测试目前可以用的,如果大家有补充可以告诉我,互帮互助!下面放我当前测试可以用的几个在线视频流。原创 2022-11-29 09:54:17 · 5889 阅读 · 2 评论 -
lodash实现防抖和节流功能及原生实现
lodash实现防抖和节流功能及原生实现原创 2022-06-22 17:02:42 · 479 阅读 · 0 评论 -
网页鼠标点击特效案例收集(直播间红心同理)
2. 鼠标点击出随机设置的文字 3. 鼠标点击出现烟花波纹 4. 鼠标移动出现星星拖尾 5. 鼠标粒子拖尾 6. 鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果 7. 樱花飘落背景特效 8. 蜘蛛网背景特效......原创 2022-06-22 10:39:51 · 46399 阅读 · 2 评论 -
.mp4视频测试地址
mp4视频测试url地址原创 2022-06-22 09:40:07 · 6214 阅读 · 3 评论 -
前端人脸识别解决方案
最近业务功能需求开发中Web端需要接入人脸识别,于是做了技术预演1.第三方解决方案现有的云服务商解决方案:市场还有很多类似的解决方案,这里不一一列举,下面是某云服务商的报价Web API中有个MediaDevices.getUserMedia()的方法,调用后会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道。 旷世 - 人脸识别 face++[1] 腾讯云神图.原创 2022-01-17 10:11:13 · 6703 阅读 · 0 评论 -
Vue中监听键盘事件及自定义键盘事件
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题:我们必须知道某个按键的keyCode值才能完成匹配,使用起来十分不便。方案:在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。<input @keyup.enter="function">另外,Vu..原创 2022-01-11 15:05:59 · 5214 阅读 · 0 评论 -
HTML CSS实现翻页效果(动画)
有详情注释说明<html><style> * { padding: 0; margin: 0; } body, html { height: 100%; } body { /*perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小, 大小程度由该属性的值决定。默认情况下,消失点位于元素的中心,但是可以通..原创 2022-01-05 09:34:29 · 5357 阅读 · 1 评论 -
H5调用摄像头拍照并下载照片
类似需求基本粘贴复制就能用调用摄像头拍照转成base64格式后下载图片,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video)<html ><style> body{ text-align: center; } button{ width: 100px; height: 40px; background-color: #d35555; border-radius: 5px; border:non原创 2022-01-04 10:55:01 · 1515 阅读 · 4 评论 -
响应式网站-媒体查询
1、什么是响应式网站响应式是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面计算机显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现 。2、响应式网站的核心逻辑优雅降级,内容优先。响应式:一个网站去兼容多个终端,而不是为每个终端做特定版本。优点:面对不同分辨率,设备灵活性比较高;快捷解决很多设备的适应问题适合中小型网站 缺点:因为要兼容各种设备,工作量很大,效率不高代码冗余,会出现很多隐藏无用的元素,加载时间长 原理:通过css3新增的媒原创 2021-12-31 14:16:11 · 751 阅读 · 0 评论 -
15个 Vue 技巧使用的总结经验
1、将一个 prop 限制在一个类型的列表中我们在使用 prop 时,可能会有时候需要判断该 prop 是否在我们规定的范围内(或者说规定的值内),此时可以使用 prop 定义中的 validator 选项,将一个 prop 类型限制在一组特定的值中。export default { name: 'Test', props: { name: { type: String, }, size: { type: String, valid...原创 2021-12-30 13:52:52 · 375 阅读 · 1 评论 -
基于element实现文件(资源)上传 - 好用
自定义上传规则按需定义:1.总大小不可超出200M2.文件上传不重复3.支持文件格式("mp4","MP4","mov","MOV","mp3","MP3","jpg","JPG","png","PNG","jpeg","JPEG","bmp","BMP","txt", "TXT","text","TEXT","doc","DOC","docx","DOCX","xls","XLS","xlsx","XLSX","ppt","PPT","pptx","PPTX",...原创 2021-12-28 10:42:28 · 989 阅读 · 0 评论 -
使用video.js重新封装视频播放器支持点播及直播
一、安装指定版本是正常命令后加‘@版本号’npm install videojs@7.15.4 --save二,组件封装的代码<template> <div class="live-video-wrapt"> <div id="videoUpdate" class="video-show" v-show="!isError"> <video id="videoTV" class="video-j原创 2021-12-13 10:54:30 · 3986 阅读 · 0 评论 -
web移动端vw rem适配各种尺寸,手机基于 vw 单位的移动端适配方案
1"head"里添加"meta"<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />2 计算 html 的"font-size"在utils里创建rem.jsexport const setFontSize = (designWith = 750) => { // 设计稿宽度, 750|640|520 .原创 2021-12-10 10:35:55 · 211 阅读 · 0 评论