自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 收藏
  • 关注

原创 video 标签参数,禁用画中画、投屏

(由于浏览器机制,对首次用户未交互的页面,拦截了视频的有声自动播放,autoplay:true 并不会自动播放): 布尔属性,用于在使用有线(HDMI、DVI 等)和无线技术(Miracast、Chromecast、DLNA、AirPlay 等)连接设备时,禁用远程播放功能。8、playsinline: 布尔属性 指明视频将内联(inline)播放,即在元素的播放区域内。2、controls : 加上这个属性,浏览器会在视频底部提供一个控制面板,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。

2024-04-08 15:59:33 594

原创 video 播放字幕,解决hls导致的字幕播放问题

hls 是1.4.0版本,阻止了原生的video 字幕播放 导致播不出来,看了下hls的代码,他内部也有subtitle字幕的播放,由于video的textTrack 的mode 没有设置当前播放的 导致被hls内部的subtitle给覆盖了,所以只要设置当前的。我这边用的是metadata,原因是需要统一字幕的样式,位置,大小等,用到的方法是获取textTrack,trak的oncuechange 方法。video 播放字幕的方法是 播放字幕webvtt文件,video 原生自带播放功能, 只需要加。

2023-12-18 14:41:54 196 2

原创 实现视频小窗口播放-画中画

实现逻辑:同一个视频,运用监听方法,当原视频未出现在窗口内时,视频容器增加一个css类,并poisiton: fixed 定位,调整容器的大小以及样式,待原视频出现在窗口内,就移除相关css类即可。IntersectionObserver.unobserve(document.querySelector(".videoplayer")) 取消监听。IntersectionObserver.observe(document.querySelector(".videoplayer")) 监听方法。

2023-11-08 15:39:10 165 1

原创 html网页元素灰白效果、禁用拖拽、禁用选择页面内容

元素灰白效果,禁用选择内容,文本内容不可复制。禁用拖拽,禁止页面元素拖拽。

2023-04-23 16:23:41 312

原创 h5 视频全屏-横屏实现,遇到问题以及解决方案

最近需要实现h5 视频全屏也就是横屏,横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的,只能考虑用css 样式上横屏显示video

2022-10-14 17:27:52 5694 1

原创 element-ui iconfont乱码问题处理

一、问题 使用element-UI的项目,打包部署以后,偶尔会出现iconfont显示乱码,但是刷新后又会好。研究后,查看打包后的css,图标字体的content经过scss编译以后变成了这样 不过正常情况下图标还是会显示的,但是偶尔进入页面后,所有的iconfont图标会变成乱码。二、原因 1、主要原因是sass 编译问题,针对iconfont 编译后会乱码, 2、项目中引用e...

2022-01-19 11:53:56 6580

原创 video 播放器自动播放问题, video视频截图

最近在写9宫格视频播放的功能,需要自动播放,但是发现一个问题,有些浏览器是禁止自动播放带音频的视频的,即使有的可以自动播放,但是页面刷新后,视频不会自动播放。后面查找资料,因为是禁止有音频的视频播放,所以把视频进行静音就可以了。video 有个属性 muted 表示是否静音播放,设置muted=muted 就可以自动播放了,不管在什么浏览器或者刷新都会自动播放<video width="100%" height="100%" :src="video.v

2021-10-13 17:54:46 2732

原创 window.open,打开窗口与打开新标签页,刷新父窗口数据

window.open(url, [name], [configuration])url, 为要新打开页面的urlname,为新打开窗口的名字,可以通过此名字获取该窗口对象configuration,为新打开窗口的一些配置项,比如是否有菜单栏、滚动条、长高等等信息1、name 为打开窗口的名字,可以自定义,如果name名称相同,多次打开只会打开一个窗口; 也可以为以下值,若为以下值就是打开多个窗口不管页面是否相同name 描述 _blank 默认的,在新窗口打...

2021-09-10 14:40:34 5075

原创 移动端适配,iphonex兼容性处理

记录下开发项目中遇到的问题1、移动端用的插件是 vant,解决vant适配,采用了rem布局,用的是postcss-pxtorem 插件自动转换为rem。安装postcss-pxtorem 版本为5.1.1,版本要大于5.0.0,才会生效,配置就跟vant官网一样// postcss.config.jsmodule.exports = { plugins: { // postcss-pxtorem 插件的版本需要 >= 5.0.0 'postcss-pxtorem'

2021-07-26 10:26:42 1017

原创 最近用到的相关插件

1、富文本编辑器tinymcehttp://tinymce.ax-z.cn/tinymce-vue vue版2、裁剪组件 vue-cropperjshttps://github.com/Agontuk/vue-cropperjs3、上传插件 支持分片,断点续传vue-simple-uploader 是simple-uploader.js的vue 封装版vue-simple-uploaderhttps://www.npmjs.com/packa......

2021-07-23 18:29:20 766

原创 file、Blob、dataUrl 相互转化

一、file 、blob 转化成dataurlfunction fileToDataURL(file) { let reader = new FileReader() reader.readAsDataURL(file) // reader 读取文件成功的回调 reader.onload = function(e) { return reader.result }}比如,上传图片功能,用input选取图片后可用该方法获取文件的base64url

2021-07-23 09:51:01 1962

原创 vue2.0 根据不同环境配置编译不同包

1.项目安装cross-env。cross-env是node的一个设置和使用环境变量的脚本:npm install cross-env -D2.在根目录的package.json文件中,把scripts对象的build字段的值改为以下代码。"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev",

2021-05-26 18:23:34 663

原创 找出数组中重复元素,并按重复的次数由少到多排序 es6

最近在面试的时候出现的一个考题,当时做出来了,回来验证后发现有点小问题,现在把这个记录下来供自己以后参考。自己写的,用的es6的写法。 repeat(arr) { let e = [] arr.forEach(item => { let num = arr.filter(n => n === item).length if (

2021-05-18 17:34:03 1087

原创 vue 指令实现 窗口的拖动

直接上代码,directives: { /*自定义拖拽*/ drag: { inserted: function (el, binding, vnode) { var odiv = el.parentNode // 获取元素的父级 也就是这个移动的窗口 el.onmousedown = function (eve) { eve = eve || window.event va

2021-03-26 16:09:49 849

原创 uni-app app端用highcharts绘制图表,并生成海报保存到手机相册

uni-app 打包app后 highcharts图表绘制不成功,不支持该方法,所以就考虑在app中嵌入webview h5页面,实现图表的绘制。首先引用安装highcharts,封装成一个组件npm install highcharts --save<template> <view class="highcharts-container" style="min-width: 250px;" :style="{height:height}"></view>

2021-03-16 16:37:27 1349

原创 手机端课程表的实现——仿超级课程表

在开发项目时,有一个页面是我的课程表,想到超级课程表app,觉的它的那个我的课程表页面非常好,简单直观,把纸质的课程表在手机端展现出来了。 后来自己研究了一下,照着它的样式也写了一个,并且也能添加课程。 其实它的原理很简单,就是一张表格,我们需要把这张表格的样式写好,后面就是数据想对应了。/*课程表*/

2017-08-26 17:39:13 11690 6

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除