首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏开源小分队

    超强H5视频播放器!!!

    今天给大家介绍一款强大的HTML5视频播放插件。 概述 MuiPlayer是一款H5视频播放插件,默认配置了精美可配置的播放控件,包括了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。 支持 mp4、m3u8、flv 等多种媒体格式播放,解决大部分兼容问题,同时适应在PC、手机端播放。 MuiPlayer 除了默认的简单配置,还具有丰富的参数可以自定义播放器实例,通过轻松的配置即可完成自定义场景的视频播放。 MuiPlayer还提供了一些方法(接口),用户可以自己控制一些播放器的行为动作,例如开启全屏、退出全屏等。

    2.8K20编辑于 2022-12-06
  • 来自专栏npm包插件

    纯原生编写的h5视频播放器

    snail-player-native 一个纯原生代码编写的h5视频播放器, 功能完善,基本满足使用,仅供学习,禁止商用 演示 演示加速 复制该链接新打开页面:https://webrabbit.oss-cn-beijing.aliyuncs.com utils.removeClass(this.playBottom, 'sn-player-fullscreen-bottom-active') this.isFullScreen = false } } <h3> index.js</h3> //加载css renderCss(url) { var head = document.getElementsByTagName('head')0; var document.getElementsByClassName(cls)[0] } } export default Utils Function - 按空格键暂停播放 - 点击屏幕暂停播放 - 视频进度条拖拽 ,区分颜色 - 鼠标移动到进度条上方显示时间 - 视频快进慢放 - 视频声音控制 - 画中画 - 整屏播放 - 双击全屏播放 - 等 运行环境 支持es6的各种浏览器 最好用chrome 源码地址,欢迎

    1.8K71编辑于 2022-05-30
  • 来自专栏开源技术小栈

    工具系列 | H5自定义视频播放器实现

    前言 目前,只是对自定义视频播放器的初步实现,之后会逐步完善! 一、H5视频、声频常用方法 1.canPlayType(); 检查浏览器是否能够播放指定的视频、声频。 3.play();播放媒体数据 使用play()方法播放当前视频。该方法通常与pause()方法一起使用,实现播放和暂停功能。 二、H5视频、声频常用属性 1.autoplay属性 自动播放 使用autoplay属性,当视频播放准备工作一旦完成,视频马上播放。 JavaScript 语法 audio/video.buffered; 3.controls属性 设置或返回视频、声频用户界面 使用controls属性设置或返回能够操作视频、声频播放或停止的用户标准界面 jquery-2.2.3.min.js"></script><script type="text/javascript" src="js/remauto.js"></script><title>自定义视频播放器

    6.2K10发布于 2020-07-23
  • 来自专栏崔哥的专栏

    H5的音视频播放器 —— MediaElement.js

    首先,只需嵌入

    3.6K10编辑于 2022-06-12
  • 来自专栏国标视频云平台

    免费视频直播、点播H5播放器SkeyeWebPlayer适配移动端

    免费视频直播、点播H5播放器SkeyeWebPlayer适配排除,移动端,常见移动端Web页面问题及解决方案SkeyeVSS其独创的ws-rtsp流媒体直播技术,兼容传统安防流媒体的同时,不需要安装浏览器插件 ,解决互联网接入安防监控延迟高、起播慢等问题;支持全平台终端H5直播点播(PC、Web、Android、iOS)。 SkeyeWebPlayer 播放器默认情况下会根据屏幕宽度自动进行自适应,默认宽度等于100%,在外部盒子没有设置宽度的情况下,播放器的宽度与屏幕相等,在初始化播放器 height:0 或者不设置时, 0 // 56.25 })<style>.player{height:100%; /*为100%时根据外层div的高度来显示 (也可设置排px)*/}</style>图片横屏模式模式下,图片3、 left: 0; width: 100vw; height: 100vh; }}</style>强制横屏如图:(强制通过页面 禁止app或手机的横竖屏的切换是不现实的,H5

    2K20编辑于 2023-04-04
  • 来自专栏腾讯移动品质中心TMQ的专栏

    如何从海量用户中轻松定位H5视频播放器问题?

    所以需要一种快捷准确的方案,能从成千上万用户的播放失败的源中找出是由于播放器或者是代码导致的问题。在这种情况下,引入了视频播放器问题定位方案。 三、HTML 5 视频介绍 前面介绍框架中涉及QQ浏览器、UC浏览器、Chrome浏览器视频播放验证的,为了更加清楚了解验证视频可播放性的原理,首先我们来认识一下HTML5视频(简称H5视频)的的HTML height pixels 设置视频播放器的高度。 src url 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。 开始播放音频/视频 pause() 暂停当前播放的音频/视频 从这个例子中,我们可以看出以下几点: 首先,如果视频页面没有HTML页面如果没提供VIDEO标签,肯定是不支持H5视频的播放,所以这种视频的 问题3:ku6网站少量片源m3u8视频源不规范的问题。 根本原因: 获取的视频裸地址是.m3u8格式的,播放解析的m3u8文件后,里面文件不是ts类型,而是mp4类型。

    2.9K80发布于 2018-02-06
  • 来自专栏Web前端知识点概要

    视频播放器

    meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频播放器 15px; background: #fff; position: absolute; top: 6px; left: -12.5px; box-shadow: 0 0 3px ">
    分享


    画质

    锁屏

    赞赏
    <script> var i = {}; var timer = null;

5.4K00发布于 2020-05-07
  • 来自专栏国标视频云平台

    免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题

    免费视频直播、点播H5播放器SkeyeWebPlayer使用常见问题1、用常见问题——配置iframe允许自动播放和全屏SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可以全屏播放的 3、用常见问题——快照截取图片报错 Uncaught (in promise) RuntimeError: abort(RuntimeError: abort(both async and sync fetching /static/SkeyeWebPlayer/libVSS.wasm'), to: './' } ])],在html中直接使用 demo下载地址4、用常见问题——H265视频流播放 图片解决方法:同上更多文章在VUE项目中使用永久免费H5直播点播播放器SkeyeWebPlayer.js

    2.2K30编辑于 2023-04-04
  • 来自专栏个人路线

    OpenHarmony视频播放器

    ,于是有了这个教程,本教程在最后也是实现了一个简单的播放器。 : VideoController; } image-20220813095416631 其中仅src( 视频播放源的路径 )这个参数是必填的。 支持本地视频路径和网络路径。 .controls(boolean) 默认值true 控制视频播放的控制栏是否显示。 .loop(boolean) 是否单个视频循环播放。 : { duration: number }) => void 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为秒(s)。 onSeeking(event? : { duration: number }) => void 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为秒(s)。 onSeeking(event?

    5.9K20编辑于 2022-12-05
  • 来自专栏Krryblog

    自制 h5 音乐播放器 可搜索

    温馨提醒: 本播放器并不需要什么特别的运行环境,直接下载打开就能用了 ^_^ 响应式优化,可在各种大小的设备运行打开 音乐搜索的结果均来自 qq音乐 (后续会继续扩大到多个平台) 本播放器还有一些 bug 谈谈开发: 果断使用的是 H5 播放器,十分好用 一般在做这种播放器的开发,要多多使用面向对象的开发思想。 定义一个播放器对象,相关参数、方法如下: 播放器对象:krAudio 参数:   播放器:audioDom   进度条锁定:locked:true   进度条按下的锁:kdown   静音的锁:flag_volume //替换成2018/04/03 歌词解析: 1 //解析歌词 2 function parseLyric(lrc) { 3 var lyrics = lrc.split("\n"); 4 有坑也有欢笑 另外给大家提供一个判断非空的方法: 1 //判断非空 2 function isEmpty(val) { 3 val = $.trim(val); 4 if (val

    4.6K40发布于 2018-09-10
  • 来自专栏视频加密

    H5播放器加密、水印功能示例

    随着flash播放器的退化,H5播放器占据了主流,方便易用,支持pc和手机端直接打开播放,可扩展更多功能,加密、水印、广告、等都可以实现。 将视频文件加密后,PC、Android、iOS等网页可直接播放,但只能在授权域名下播放,防止用户非法下载、复制、传播。 具体功能如下: 支持MP4、FLV等多种常见视频的加密,可提供可视化加密界面,或者命令行加密工具,以便集成到客户代码中自动调用 加密后视频,在电脑、手机浏览器下(包括QQ、微信)等常见浏览器打开即可播放 播放器外观支持控制换肤。 支持播放过程中弹出题目,须回答题目才可继续。 支持浮动会员ID显示,防录屏。 集成方便 H5播放器动态字幕功能 c 动态字幕H5播放器.jpg H5播放器水印参数设置 c水印参数设置H5.jpg

    2.3K40发布于 2020-05-21
  • 来自专栏用户8739990的专栏

    视频播放器有哪些用途?视频播放器有哪些处理流程?

    ,现在的手机或者电脑上面都拥有专用的视频播放器,那么视频播放器有哪些用途? 视频播放器有哪些处理流程?下面小编就为大家带来详细介绍一下。 image.png 一、视频播放器有哪些用途? 视频播放器是一般都是指设备中可以播放文件的软件或者一些电子产品,那么视频播放器有哪些用途? 视频播放器一般是将文件播放给用户们观看的软件或者电子产品,那么视频播放器有哪些处理流程? 以上就是关于视频播放器有哪些用途以及视频播放器有哪些处理流程的文章内容,相信大家对于视频播放器已经有所了解了,平时大家也会经常使用到视频播放器,希望小编今天的介绍对大家有用。

    4.9K10发布于 2021-06-25
  • 来自专栏曾大稳的博客

    ffmpeg视频播放器相关

    视频同步问题 音频线性播放,视频同步到音频上。 视频线性播放,音频同步到视频上。 用一个外部线性时间,音频和视频都同步到这个外部时间上。 慢慢的缩小睡眠时间 达到平缓的效果 if (diff > 0.003) { delayTime = delayTime * 2 / 3; if (delayTime < defaultDelayTime / 2) { delayTime = defaultDelayTime * 2 / 3; } else if (delayTime delayTime = delayTime * 3 / 2; if (delayTime < defaultDelayTime / 2) { delayTime = defaultDelayTime * 2 / 3; } else if (delayTime > defaultDelayTime * 2) { delayTime

    6.3K31发布于 2018-09-11
  • 来自专栏TSINGSEE青犀视频

    H5网页播放器EasyPlayer.js如何实现直播视频实时录像?

    最近,有位用户对我们的EasyCVR提出了一种关于播放器实时录像的需求。按照以往的概念,网页怎么能像C/S客户端那样做实时的视频录像呢?因为浏览器写本地文件几乎是不可能的一件事情。 后端收到前端录像的指令,将要发往前端的音视频数据先预存一份在服务端,当收到前端的停止录像指令后,再将整个缓存的数据,打包封装成MP4,提供给用户下载。事实上,这种方式其实是非常不合理的。 我们的EasyPlayer视频流媒体系列播放器,可支持H.264/H.265视频编码,并拥有多个版本,包括EasyPlayer-RTSP、EasyPlayer.js、EasyPlayerPro等,用户可以根据自身的需求对其进行二次开发或自主集成

    3.1K30编辑于 2022-07-06
  • 来自专栏一Li小麦

    基于react的H5音频播放器

    ---- 初步 最近刚好就做了音频播放器的需求,现将踩坑记录如右。 项目是基于React,镶嵌在页面。为此开发了组件audio.js。不过不管什么框架。逻辑都是一样的。 基础界面如下 ? audio满足如下特殊属性 HTML 音频/视频重要属性 属性 描述 currentTime(重要) 设置或返回音频/视频中的当前播放位置(以秒计)。 duration 返回当前音频/视频的长度(以秒计)。设置或返回是否在加载完成后随即播放音频/视频。 HTML 音频/视频事件 事件 描述 canplay 当浏览器可以开始播放音频/视频时触发。 ontimeupdate 当currentTime更新时会触发timeupdate事件” pause 当音频/视频已暂停时触发。 play 当音频/视频已开始或不再暂停时触发。 playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发。

    8.7K10发布于 2019-07-18
  • 来自专栏全栈程序员必看

    qt实现视频播放器

    本篇博客介绍如何利用qMediaPlayer和qvideowidget实现视频文件(avi,mp4….)的播放,并且提供进度显示,还可以通过拖动进度条来变换播放位置。 相关代码可以在我的资源里下载”基于qt的视频播放器” pro文件: #------------------------------------------------- # # Project created QApplication a(argc, argv); VideoPlayer w; w.show(); return a.exec(); } VideoPlayer是我定义的播放器窗体类 m_bPressed) setValue(i64Progress); } 这个类的作用有3个:1)接收QMediaPlaer发来的进度信息,更新进度条;2)当用户操作进度条时,不再让进度条响应 QMediaPlaer发来的进度信息;3)当用户完成对进度条的拖动后,向QMediaPlaer发送播放位置更新信息。

    4K20编辑于 2022-09-06
  • 来自专栏BennuCTech

    Vue3开发:视频播放器video.js使用详解

    前言 Video.js是一个通用的在网页上嵌入视频播放器的JS库,比原生video标签有更强大的功能、更好的兼容性、更美观等优点。 是一个比较流行的视频播放器,它的官网是https://videojs.com/ 本篇文章就来看看在vue3项目中如何使用video.js。 配置 在创建videojs的时候,第一个参数是对应的是播放器元素,可以是id也可以是DOM Element;第二个参数是options,即播放器的相关配置。 播放器操作 上面通过videojs创建了一个Player对像,我们就可以通过这个对象的各种函数来操作播放器。 配合error事件 播放器事件 通过Player.on(string, EventListener)函数可以设置播放器的监听事件,第一个参数是事件名称,第二个参数是回调。

    15.1K41编辑于 2023-08-28
  • 来自专栏iOS开发攻城狮的集散地

    iOS AVPlayer视频播放器

    GOVVideoPlayer/GOVVideoController 是一个基于AVPlayer封装的视频播放器,支持播放/暂停、左右退拽快进、上下滑动调节音量、自动手动全屏、全屏时横屏Or竖屏、有缓冲进度指示条 、卡顿指示器、切换视频源。 ---- 更新于2017/8/10,增加了GOVVideoController GOVVideoPlayer是在继承于UIView的基础上封装的视频View; GOVVideoController是在继承于 UIViewController的基础上封装的视频视图控制器,用起来更方便简洁,解耦性强,几行代码就足够了。 bufferStart:) name:AVPlayerItemPlaybackStalledNotification object:self.avPlayer.currentItem]; //KOV监控 播放器进度更新

    5K40发布于 2018-05-22
  • 来自专栏JNing的专栏

    Ubuntu: 安装视频播放器

      SMPlayer 是个适用于 Linux 下的免费多媒体播放器,内置各种解码器, 有生成视频缩略图,使用音视频过滤器等功能。

    4K60发布于 2018-09-28
  • 来自专栏灵简

    首个基于西瓜播放器的WordPress m3u8视频播放器插件wp xgplayer

    前段时间不是写了基于videojs播放器的插件吗,然后看见有人说国内用DPlayer来搭配的比较多,我就找了下DPlayer,但是找的途中,才看见了西瓜播放器这款产品,是字节跳动旗下的开源产品。 所以我就直接放弃DPlayer,改用西瓜播放器来试了下。 相比之前Wpmvp的播放器插件,功能差不多,但是代码有所不同,因为识别问题,由于我技术不到家,最后只能都改成js了,所以可能会有兼容问题,后续看用户反馈,如果没什么人用就不管了,播放器这个东西其实和videojs 插件功能: 只支持mp4和m3u8视频 支持视频截图 支持多个视频 支持下一集 画中画 短代码 倍速选择 样式全屏 禁用了右键菜单 经典编辑器快捷键 古腾堡编辑器快捷引入 短代码: 单个视频 [xgplayer_video url="视频完整链接"] 多个视频 [xgplayer_video url="视频完整链接1,视频完整链接2"] 截图预览:

    9.2K21编辑于 2026-03-04
  • 领券