【插件】前端自用组件推荐-视频播放器

最新推荐文章于 2025-07-14 18:11:43 发布
最新推荐文章于 2025-07-14 18:11:43 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端技术 文章标签： 音视频 http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/G971005287W/article/details/131633479
文章介绍了西瓜播放器和xgplayer这两个前端视频播放器组件。西瓜播放器基于组件化设计，支持mp4的分段加载，实现清晰度切换和流量节省。此外，它还支持flv、hls、dash的点播和直播功能。xgplayer则是一个轻量级的HTML5视频播放器，具有节省流量的特性。

【插件】前端自用组件推荐-视频播放器

西瓜播放器 (bytedance.com)

西瓜播放器 | 快速上手 (bytedance.com)

xgplayer: A HTML5 video player with a parser that saves traffic (gitee.com)

西瓜播放器是一个Web视频播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。文档

Vue 视频播放插件vue-video-player
达拉崩巴斑得贝迪卜多比鲁翁_
09-23 7825
安装 npm install vue-video-player --save 引入 可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一） 【1】全局引用， 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) 【2】组
100题前端面试[题目+答案] -- 自用
weixin_46336091的博客
02-02 745
instanceof 利用原型链，查找构造函数的prototype是否出现在实例对象的原型链上，如果有就返回true，如果一直查找到最后一层都没有找到，返回false。在基本数据类型调用方法的时候，后台会为他创建一个相对应的基本包装类型，根据基本数据类型的值实例化出一个实例，然后通过这个实例去调用指定的方法，结束后会销毁实例。包装对象 就是和 数值，字符串，布尔值相对应的Number，String，boolean三个原生对象，这三个原生对象可以把原始类型的值包装成对象。history 使用时遇到什么问题？
前端视频播放器
01-25
js+html+css视频播放器var CuPlayerList ="flv1.flv|flv2.flv|btq.flv|flv1.flv|flv2.flv|btq.flv|" var sp =CuPlayerList.split("|") var num = sp.length; var video_index = 0; function getNext(pars) { if(video_index < num-1) { video_index++; so.addVariable("JcScpVideoPath",sp[video_index]); so.write("CuPlayer"); } else { video_index = 0; so.addVariable("JcScpVideoPath",sp[video_index]); so.write("CuPlayer"); } } function changeStream(CuPlayerFile){ so.addVariable("JcScpVideoPath",sp[CuPlayerFile]); so.write("CuPlayer"); }
js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler
04-05
js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler csdn地址：https://blog.csdn.net/chenluliang/article/details/123974475
vue中使用西瓜播放器xgplayer （封装）+xgplayer-hls 播放.m3u8格式视频
最新发布
weixin_53587375的博客
07-14 835
vue中使用西瓜播放器xgplayer （封装）+xgplayer-hls 播放.m3u8格式视频
前端实现视频播放功能----vue-video-player --save
m0_61043829的博客
06-14 6436
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。preload: 'auto', // 建议浏览器在加载元素后是否应该开始下载视频数据。notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。src: 'http://vjs.zencdn.net/v/oceans.mp4' // url地址。//将侦听器绑定到组件的就绪状态。
7个Web前端极其精美的播放器组件源码（一）
08-05
7个Web前端极其精美的播放器组件源码（一）
前端开发简历模板-前端开发工程师-3年.doc
06-06
前端开发简历模板-前端开发工程师-3年.doc 本资源摘要信息涵盖了前端开发工程师的简历模板，涵盖了 HTML/CSS、JavaScript、框架/库/插件、其他技术技能，以及项目经验等多方面的内容。 一、HTML/CSS * 掌握流式、...
前端开发_Vuejs_Purecss_书签管理插件_自用优化_1744481629.zip
04-13
此外，作为一个自用优化的产品，这款插件在功能上可能更贴合开发者个人的习惯和工作流程。它可能包括了一些独特的功能或优化，这些是标准书签管理功能之外的定制化改进。这样的优化有助于提升个人的工作效率，并可能...
前端软件专用日语名词等 自用
10-29
“插件”（Plugin）是扩展软件功能的组件，常用于浏览器或开发工具。在前端开发中，如“Vue.js”的日语名称为“ビュウ.js”（Byuu.js），而“WebPack”（一个模块打包工具）的日语术语是“ウェブパック”（Uebu ...
【前端项目——组件】TodoList实现（js / react）
Everglowwwwww的博客
04-24 781
先上组件图总之要注意的就是（主要是js里）：全选勾选要和todolist动态结合，比如所有item勾选了那么全选也要选上，再就是如果在全选的时候又新增item，由于新增默认是checked=false，所以全选会自动取消勾选。
7个Web前端极其精美的播放器组件源码（五）
08-06
在线效果：http://ynif.v099.10000net.cn/demo/bofangq/5/bofangq/index.html
网页视频播放插件
12-21
网页视频播放插件，修改INDEX中的视频地址就可以了，IE8及以下不可用
前端开发免费flash视频播放器
09-14
一款在网页上播放视频的免费的播放器，功能强大，体积小巧，跨平台，使用起来随心所欲。 播放器主要以adobe的flash（所使用的版本是CS5）平台开发，所以在支持flash插件的平台和浏览器上都可以使用，而无需下载其它插件，如果你需要修改完整版里提供的相关的flash源文件，请使用adobe的flash cs5以上版本打开源文件修改。 同时也支持html5的视频播放，即同时可以在Ipad，Ipho ne等IOS平台上播放视频，并且只需简单代码就可以使用，无需了解html5插入视频的方法。 软件在对各平台的兼容性方面适应性比较强，比如你可以设置在Android平台或wp平台上在用户已安装flash插件的时候使用flash播放器，在没有装flash插件的情况下使用html5播放器。 是一种前台使用的程序，不涉及到服务器程序（asp,php,jsp,.net），也不涉及到对服务器的操作(即不需要写入权限)，所以不存在安全方面的问题。同时可以集成在任何程序中，包括asp,php,jsp,.net以及其它支持插入flash的环境中。
7个Web前端极其精美的播放器组件源码（七）
08-11
在线效果：http://ynif.v099.10000net.cn/demo/bofangq/7/bofangq/index.html
7个Web前端极其精美的播放器组件源码
08-26
7个Web前端极其精美的播放器组件源码
前端视频播放初探总结，video标签-视频插件jwplayer
前端-后端学习之路
09-27 1万+
1.HTML5原生支持<video>简单使用： <video src="../TestRes/test.mp4" autoplay controls></video>html5的video标签只支持mp4、webm、ogg三种格式,<video>原生支持的格式 https://developer.mozilla.org/zh-TW/docs/Web/HTML/Supported
一款vue的前端视频播放插件 支持m3u8 vue-video-player
NDZ0819的博客
11-25 6485
项目进行时, 对视频模块需要进行组件开发，结合当前使用的开发框架是vuecli。 于是寻找到vue-video-player根据github上的文档进行开发，发现并不能实现播放功能，于是在网站上进行寻找发现，vue-video-player依赖于videojs 1、安装：npm install vue-video-player --save推流/m3u8 需要：npm install --save videojs-contrib-hls 2、当前版本： "vue": "^2.6.11", "v.
vue3视频播放插件vue3-video-play的具体使用方法
热门推荐
xdlumia的博客
08-23 2万+
发布于:12分钟前 之前的vue项目中用到视频播放器，但是UI不是很好看，索性就打算写一个视频播放器插件紧随着vue3的发布，vue3的生态还不是很完整，就索性把这个视频播放器插件修改成了vue3版，最终使用vite2+vue3开发 插件Github地址vue-video-player 先看一下这个播放器(vue3-video-play)的界面吧 vue3-video-play视频播放插件基于原生的HTML5的 <video>标签 开发，所以支持的视频格式和<vide...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是Superman丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值