动态调用jPlayer播放器播放视频列表

最新推荐文章于 2025-07-10 14:16:25 发布
最新推荐文章于 2025-07-10 14:16:25 发布
阅读量4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dongguan_123/article/details/78589050
项目中需要实现点击视频海报后弹出播放层播放对应视频。初选video.js但IE兼容性不佳，转而使用jPlayer。通过研究API文档，实现了动态调用播放视频列表的功能，解决了视频数量限制的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近做的一个项目中需要使用视频播放器播放视频，页面有视频海报的列表，点击海报，弹出播放层，播放相应视频，和一般性的视频网站一样，播放器是随调随用的。于是查了一下视频播放相关方面的插件，使用比较多的有video.js和jPlayer，于是先使用了video.js插件： 


给海报赋值点击事件playListVideo，将该事件放到methods里：





这里使用的方法是http://www.jq22.com/jquery-info404所提到的方法:

一个页面中有多个视频，需要点击后触发bootstrap 的模态窗，再弹出视频

我个人的方法是：

html:

1
< a  videohref = "http://xxx.mp4"  class = "video_link" >< img   src = "../images/xxx.jpg" /></ a >

JS:

最低0.47元/天 解锁文章

200万优质内容无限畅学
jplayer实现动态添加曲目到播放列表
北上工作室
02-24 993
分析：jplayer播放列表结构，可知该结构采用JSONArray，所以为了实现动态获取播放列表，在Controller返回到HTML时，将列表内容按照jplayer播放列表内容，重新组装JSONObject数据，并填入JSONArray中，利用session或者request传递到HTML中，添加到jplayer播放列的js中，实现动态获取播放列表。 实现： 1、编写Mapper，返回一个A...
html5实现视频列表js代码,JavaScript实现html5视频播放器列表
weixin_31083901的博客
06-08 2465
本文将使用HTML5提供的 VideoAPI做一个自定义的视频列表播放器(重点放在视频的顺序播放，列表切换上，并不重新定义控制条)。一、插入视频如果不加上controls属性将不会显示控制条二、HTML结构播放列表进球瞬间胜利庆祝进球瞬间胜利庆祝进球瞬间胜利庆祝 < > 三、js部分1. 首先获取或定义一些需要用到的变量var video = document.getElementB...
基于jplayer的播放器
小丸子的专栏
10-08 2155
<br />因为音乐网站需要一个播放器，而我又不会写播放器，于是我开始上网百度了。下了n个flash播放器，界面不错，但是我不会as，根本不知道怎么和php结合，xml呢？一样。所以就选择了比较熟悉的js来写了。但是网上的人说js不能写播放器，只能控制mediaplayer，我就郁闷了，mediaplayer那么丑陋，难道就要委屈求全？！后来，小哲告诉我一个音乐网站http://www.luoo.net/，一打开网页，我惯性地查看它的源代码，发现它用了jplayer这个jquery插件，jplayer是通过
JPlayer音频播放器深度应用与实践
最新发布
weixin_42430341的博客
07-10 795
JPlayer 是一个基于 jQuery 的音频播放器插件，它允许开发者在网页上嵌入一个自定义的、全功能的音乐播放器。JPlayer 使用 Flash 作为回退方案，来提供那些不支持 HTML5 音频的浏览器的回退方案。它支持多种音频格式，例如 mp3、oga、wav 等，并且具备易于定制的特点。JPlayer 的轻量级代码库，使其成为集成到 Web 项目中的理想选择。JPlayer拥有一个简洁但功能强大的默认样式集，这些样式在大多数情况下足以满足基本的用户界面需求。
jplayer中动态添加列表曲目（js提取request中的list数据作为js参数使用）
weixin_30314631的博客
11-24 323
jplayer 的播放列表使用如下： 1 $(document).ready(function(){ 2 3 new jPlayerPlaylist({ 4 jPlayer: "#jquery_jplayer_1", 5 cssSelectorAncestor: "#jp_container_1" 6 }, [ ...
【视频播放】Jplayer视频播放器的使用 分类： Jplayer ...
weixin_30505485的博客
05-12 440
如果你正在寻找一个网页上播放视频的插件，或者你原先网页上用的视频插件被墙了（比如jwplayer），那么就来看看下面的介绍吧 当楼主得知原先用的视频插件jwplayer所访问到的一个cdn地址失效了，并且通过网上的方法并不能修复jwplayer，使它能正常播放视频，楼主的内心是崩溃的。 但是当把Jplayer调试完成后，终于找到了一款好的替代的插件。 1、首先Jplayer的...
jplayer视频播放
03-30
使用jplayer播放视频和网页视频播放对比
jQuery jplayer支持格式的视频播放器代码
10-04
- **播放与暂停**：通过调用`jPlayer("play")`和`jPlayer("pause")`方法来控制媒体播放。 - **音量控制**：可以设置和更改音量，例如`jPlayer("volume", 0.5)`将音量设置为50%。 - **时间控制**：获取或设置播放...
jplayer歌词同步音乐播放器特效代码
03-20
然后，通过jQuery选择器选取这个容器，并调用jPlayer的初始化方法，配置播放器的参数，如媒体文件路径、皮肤样式、事件处理函数等。 接下来，我们需要处理歌词同步。jPlayer提供了一个`lyrics`事件，当歌曲播放到...
JPlayer播放器：专门用于601格式监控录像的播放
2. 软件功能：JPlayer.exe是一个视频播放器程序，支持播放.601格式的监控录像文件。 3. 附加功能：该播放器还支持一系列的播放操作，例如电子放大、画面分割，以及播放速度的调节（快进、慢放）和屏幕截图功能。 4. ...
基于jQuery的网页影音播放器jPlayer的基本使用教程
10-22
jPlayer是一个基于jQuery的网页影音播放器，可以让我们在网页上轻松地嵌入音频和视频播放功能。本文主要讲述jPlayer在播放音频方面的基本使用方法，以及如何通过HTML5和Flash两种方式来播放不同的媒体格式。 首先，...
videojs-playlist:videojs的播放列表插件
05-06
videojs播放列表 在video.js中启用播放列表的插件 维护状态：稳定 安装 通过npm安装videojs-playlist（首选）： $ npm install videojs-playlist 或凉亭： $ bower install videojs-playlist 包容性 使用您选择的工具在您的网站上包含videojs-playlist。 夹杂物的最简单的方法是[removed]所述的Video.js后标签[removed]标记： < script src =" path/to/video.js/dist/video.js " > </ script > < script src =" path/to/videojs-playlist/dist/videojs-playlist.js " > </ script > 通过npm安装时，videojs-playlis
videojs 实现视频列表 点击播放下个视频功能
10-31
videojs实现视频列表 点击播放下个视频功能
视频列表html页面,vue + video.js实现视频列表页（多个视频）
weixin_36059856的博客
06-04 3675
vue + video.js实现视频列表页vue项目中做一个视频列表页，本来用原生video标签来实现，由于考虑到手机浏览器兼容问题，找了很多插件，最后决定用video.js这个插件来实现。Video.js是一个有着HTML5背景的网络视频播放器。它同时支持HTM5和Flash视频，简单来说就是HTMl5 和 Flash 视频播放器安装video.js$ npm install video.js在...
Vue实现视频播放（一）——video.js组件的使用
weixin_44867717的博客
11-30 2042
Vue实现视频播放——video.js组件的使用 vue-pdf组件官网——https://www.npmjs.com/package/video.js 1、安装 引入video.js组件 npm install --save-dev video.js 或 cnpm install --save-dev video.js 然后在main.js中引用 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype
html调用播放器,JavaScript实现html5视频播放器列表
weixin_30480281的博客
06-07 1005
本文将使用HTML5提供的 VideoAPI做一个自定义的视频列表播放器(重点放在视频的顺序播放，列表切换上，并不重新定义控制条)。一、插入视频如果不加上controls属性将不会显示控制条二、HTML结构播放列表进球瞬间胜利庆祝进球瞬间胜利庆祝进球瞬间胜利庆祝 < > 三、js部分1. 首先获取或定义一些需要用到的变量var video = document.getElementB...
videojs实现视频列表 点击播放下个视频
11-02 3771
实现效果如下： 1.点击视频暂停或者播放，并显示中间图标。 2.点击下方选集， 实现切换到下个视频。 代码参考： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>For list</title> <link href = "./statics/video-js.css" rel = "stylesheet" type = "
js 控制 Windows Media Player播放列表
qiruiduni的专栏
10-28 2303
近期要做一个视频播放的功能，从数据库读取
利用videojs实现视频列表循环播放，自动播放下一个
热门推荐
hins
09-11 4万+
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;met
jPlayer插件：多功能jQuery视频播放器介绍
最后，通过调用jPlayer的方法来控制媒体的播放、暂停、加载等。 #### 4. 视频播放格式支持 jPlayer支持多种视频格式，其中最主要的是Flash视频（FLV）和HTML5视频（H.264、WebM、Ogg等）。在HTML5模式下，jPlayer...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值