npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

videoplay_ref

v1.0.0

Published

基于vue3封装的视频播放功能,包括进度条、点击播放、视频加倍播放,视频播放进度

Readme

一、Apl 说明

1、设置自动静音播放须知,

  <video autoplay muted playsinline>
  在移动设备上使用playsinline属性
  需要设置这个 
  VideoLoadEndPlay = ref(true);

2、如何调用

//直接引入js 也可以 
import { initSet } from '@/assets/videoplay_ref.js';

impoty {initSet } = require('videoplay_ref.js');
onMounted(()=>{
 	initSet({
 		api
 	})
 })

3、api说明

initSet 初始化 函数

videoId 视频元素 // videoId = ref();  <video ref="myVideo" >
startPlayId 开始播放按钮 ref 或直接id 用elementByid
pausePlayId 暂停播放按钮 ref 或直接id
progressValue 进度条Val值 基于vue ref 1-100
progresId 进度条iD  可以ref 绑定 或直接id  基于input 
currentTimeVal 格式化视频总时长 基于vue ref 最大支持00:00:00,不足一个小时 00:00
durationVal 格式化视频总时长  基于vue ref 最大支持00:00:00,不足一个小时 00:00
continuousPlaybackBool 设置视频播放完毕是否重新播放
videoLoadEndPlay  默认null ,可设置 true , false 是否设置了自动播放,如果视频自动播放如果设置了 这个值设置为 ref(true); 要不会出点问题

videoVolume volume 值  ref(0);
videoVolumeId 设置调整声音  基于input
isSetVolumeBool 是否指定声音大小 ref(true);  默认设置ref(true);

 * 
 * 由于浏览器是防止网站在用户未明确同意的情况下自动播放视频或音频。无法通过js, 必须通过点击事件执行播放功能
 * 
 * 视频加速播放
 * viedoPlaySPeed  值 ref(num)
 * 
 * 视频播放完毕执行回调函数
 * videoPlayEndCallBack  // 视频播放完毕执行 function(){
 *      this 指向  video
 * }