vue使用video.js
关于video.jsvideo.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放（可加载本地静态资源视频以及网络链接视频）官网：videojs.com/安装npm install video.jsmain.js中引入import Video from \'video.js\'import \'video.js/dist/video-js.css\'Vue.prototype.$video = Video使用<div class="demo1-video"> <video id...
2022-06-01
video.js自定义控制按钮
video.js自定义控制按钮 // 视频播放 if (!this.player) { let that = this this.player = videojs("#videoPlayer", this.videoOptions, function onPlayerReady(this:any) { console.log('onPlayerReady', this); // var hdButtonEl = videojs.create...
2020-04-04
vue.js循环radio的实例
最近在做一个组件联动的，需要循环展示el-radio，花了很多时间现在记录一下，也给遇到类似问题的小伙伴一个参考 <el-radio-group v-model="radioArray[item.name]" @change="handleRadioChanges"> <el-radio v-for="opt in options" :key="opt.label" :label="String(opt.label)"> {{opt.value}} </el-radio> </el-radi...
2022-02-28
【Web前端问题】video.js
我在video标签外包裹里一次div，点击div播放视频并且全屏；使用video.js的方法，报错，myPlaer.enterFullScreen不是一个function;之后发现size方法也是报错，myPlaer.size不是一个function;请问一个是我写错了么？回答：这个库我用过，你按照官方的示例包来做啊，别乱搞，没什什么大问题...
2021-05-16video.js添加自定义组件的方法
目录获取videojs源码源码的编译添加TitleBar组件js代码编写在player里注册自定义组件添加css样式应用自己的组件 重新编译在html中调用组件实际效果结语videojs虽然已经为我们提供了较为完善的功能.但是在实际应用中,我们仍然可能需要为这个播放器添加部分功能.下面将以添加标题栏为示例简要介绍如何给...
2021-10-27原生js创建两层div
使用原生js创建一个<div class="a"><div class="b"></div></div>这样的元素回答var oDiv=document.createElement('div')var oDiv2=document.createElement('div')oDiv.setAttribute("class","a")oDiv2.setAttribute("class","b")oDiv.appendChild(oDiv2)...
2020-10-19js实现div色块碰撞
本文实例为大家分享了js实现div色块碰撞的具体代码，供大家参考，具体内容如下描述：生成两个div色块，一个可以拖动，一个不可以，用拖动的去撞击不能动的，会将这个色块随机撞到一个位置，改变颜色。效果：实现：js文件：function DragObj(_obj) { this.obj=_obj; this.point={}; this.moveBool=false; this.o...
2022-05-04
js中dowhile语句是什么
1、do-while语句是一种后测试循环语句，即循环体中的代码执行后才会对退出条件进行求值。2、循环体内的代码至少执行一次。do-while的语法如下:do { statement} while (expression)下面是一个例子:let xhs = 0do { xhs += 2} while (xhs < 10)在上面的例子中，变量 xhs 先加了 2，然后用 2 去与10 做比较，如...
2022-06-12手把手教你如何编译打包video.js
目录如何获取video.js的代码编译打包video.js安装node.js安装npm所需的依赖使用npm打包在HTML中连接打包好的js文件如何获取video.js的代码video.js的源码托管在github.com上面，一般来说，master分支上对应的是最新版本，点击右边绿色的clone or download 按钮可以行源码的下载，不过最新的代码未必是稳定的版本，所...
2021-10-27
在Node.js中使用Zip文件
Zip文件是常用的压缩文件格式。在本文中，我将演示如何用 adm-zip npm模块创建和提取zip文件。创建一个Zip文件从 adm-zip 的 npm 模块中导出一个 AdmZip 类。 AdmZip的实例对应于一个zip文件。如果想要创建一个新的 zip 文件，在调用 new AdmZip() 时不应带任何参数：const AdmZip = require('adm-zip');const file = new AdmZip();...
2020-08-12【Web前端问题】video.js的问题
再一个页面使用video.js初始化了多个video标签，现在想当某个video标签播放的时候，此时如果有播放的video标签，对其进行暂停，请问如何处理呢？回答：var cur_video; var setup = function(videoEl, options) { videoEl.bigPlayButton.controlTextEl_.textContent=videoEl.el().getAttribute('duration'); videoEl.on("p...
2021-04-25vue+video.js实现视频播放列表
本文实例为大家分享了vue+video.js实现视频播放列表的具体代码，供大家参考，具体内容如下1.引入Video.jsnpm install --save-dev video.js然后在main.js中引用import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$videos = Video引用完成后我们就可以做视频列表了2.在页面中 使用method中定义初始方法i...
2022-02-18js实现点击生成随机div
本文实例为大家分享了js实现点击生成随机div的具体代码，供大家参考，具体内容如下描述：鼠标点击页面，在哪里点击就在那个位置创建一个div，宽高50，颜色随机，div在鼠标点击的正中间效果：实现：js：var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(...
2022-04-26js点击其他地方隐藏div
web页面常用的一个需求，写下拉菜单是我们往往不是用select_option，而是自定义一个元素列出选项来满足需求，当我们点击按钮出现菜单，点击按钮或菜单以外页面空白地方隐藏该菜单，这里提供一种简单有效的方法仅供参考。代码如下：<script>function getEl(obj){return document.getElementById(obj)}getEl('dom').oncl...
2020-10-10js实现div色块拖动录制
本文实例为大家分享了js实现div色块拖动录制的具体代码，供大家参考，具体内容如下描述：实现一个div50*50的色块，拖动它生成一个轨迹，松手后，这个div会重复你刚才拖动的这个路径。效果：<代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: ...
2022-05-21Vue js挂载滚动到特定的div
我发现这个脚本，并且在你点击按钮时工作正常。我想实现的是当页面加载它自动滚动到特定的div。Vue js挂载滚动到特定的div我该如何做到这一点？<button id="goto" @click="goto('porto')">Go to porto</button> <div class="page" ref="porto"> Porto page </div> methods: { goto(refName) { var element = this.$refs[refName...
2022-04-10
vue中使用videojs打包后体积过大优化
videojs 是一个非常好的js库，可以支持各种格式的视频播放，也能做直播流。官网地址 https://videojs.com/在vue项目中也可以使用 vue-video-player ，更好的与vue结合使用，封装成了相应的组件，git: https://github.com/surmon-china/vue-video-player根据官方文档的提示：npm install vue-video-player --save安装相应的依赖，配置...
2022-05-12vue.js选中动态绑定的radio的指定项
上一文，介绍了vue.js动态添加、删除绑定的radio选项，本文介绍如何选中radio的某一项绑定的数据和上文的model是一致的，选中radio或者checkbox需要注意的是：不管<input type='radio checked='true''> 你的checked属性值是true或者false，他都会选中。选中不选中，不是看checked的属性值，而是看有没有checked这个属...
2022-04-24js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script> <style> body{ position: relative; margin:0; padding:0; width:100%; height: 1000px...
2022-04-19关于vue组件中使用video-js不渲染的问题
正常的显示状态是这样的！但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了？？有人能解释这种操作是怎么回事？？？ 重新刷新浏览器又没事了！？回答：`beforeDestroy() { // 组件销毁前销毁视频对象 this.myPlayer.dispose();},`希望帮助更多的人...
2021-06-28【Web前端问题】js中void一个数字干吗用的？
function getItemKey (item, key) { if (!item || !key) return void 666 return typeof key === 'string' ? item[key] : key(item)}看到一段源代码，这里为什么要写void 666?回答：return 666的结果是undefined，目的就是为了返回undefined。不过一般都是void 0，用666纯属开玩笑，我还见过void 23333呢。至于为什么不直接用undefin...
2021-04-30videojs+swiper实现淘宝商品详情轮播图
本文实例为大家分享了videojs+swiper实现淘宝商品详情轮播图的具体代码，供大家参考，具体内容如下这个引用了videojs和swiper。实现效果类似淘宝商品详情中的轮播图，首张轮播为视频：当视频开始播放时，轮播停止。视频暂停时，轮播继续。当视频播放中，滑动到下个slide时，视频暂停播放。swiper...
2021-10-22js实现黑白div块画空心的图形
本文实例为大家分享了js实现黑白div块画空心图形的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>starts picture</title> <link rel="stylesheet" href="main.css" rel="external nofollow" ></head><body><script type="text/javascript"> /* 打印实心矩形，思路：...
2022-04-26
js如何获取div中文字的行数？
js如何获取div中文字的行数？如图，应该分别获取到一行文字、两行文字，有没有办法获取到呢？回答没有直接办法，你只能根据元素高度和每行高度做除法，网上搜下就有答案了`function countLines(ele) { var styles = window.getComputedStyle(ele, null); var lh = parseInt(styles.lineHeight, 10); var h = parseInt(styles.height, 10); var...
2020-12-16【Web前端问题】js控制div隐藏显示。
function shubiaoin(){ document.getElementById("navbar1").style.visibility="visible";}function shubiaoout(){ document.getElementById("navbar1").style.visibility="hidden";}<div id="navbar1" onmouseover="shubiaoin()" onmouseout="shubiaoout()"></div>js控制...
2021-05-16
