关于播放器JPlayer的使用及遇到的问题

article/2025/9/11 6:15:05

jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件,前台播放器外观完全可以使用XHML/CSS自定义。支持:

有一点比较好的是,在支持html5的浏览器上会使用html5的标签audio或者video,而不支持的浏览器上使用swf来播放

选择需要播放的Mp3文件。

播放、暂停、停止控制。
音量控制。 

取得播放进度等信息。

官方网站:http://www.jplayer.org/

支持格式:

  • HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
  • Flash: mp3, mp4 (AAC/H.264), flv

范例:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 /><!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video player</title>
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$("#jquery_jplayer_1").jPlayer({ready: function () {$(this).jPlayer("setMedia", {flv: "/workflowLocal/j/1.flv"});},swfPath: "js",supplied: "flv",size: {width: "640px",height: "360px",cssClass: "jp-video-360p"}});});
function a(){$("#jquery_jplayer_1").jPlayer("setMedia", {flv: "/workflowLocal/j/2.flv"});}
//]]>
</script>
</head>
<body><input type="button" οnclick="a();"><div id="jp_container_1" class="jp-video jp-video-360p"><div class="jp-type-single"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time"></div><div class="jp-duration"></div><div class="jp-controls-holder"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><ul class="jp-toggles"><li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li><li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li><li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li><li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li></ul></div><div class="jp-title"><ul><li>shentong metro</li></ul></div></div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div>
</body></html>
大部分都是官网上的demo,需要引入jquery.jplayer.min.js 以及官网上的2个css包,还有Jplayer.swf

目录结构如下,js文件夹中为官网提供的js文件,skin为官网提供的css皮肤包


这里遇到二个奇怪的问题,在本地时测试demo,只能播放官网说的m4v格式,而用flv格式就不行,但放在服务器上就解决了。

另外就是

ready: function () {$(this).jPlayer("setMedia", {flv: "/workflowLocal/j/1.flv"});},
这里的setMedia设置文件路径时候,本地只能引用url路径 比如:http://xxxxxxxxxxxxxx,而不能使用绝对或者相对路径

而在服务器上时,则可以使用绝对路径,但一定要是以项目根目录开始的绝对路径才可以。

这二个问题不知道怎么解决。。。

因为项目中要用到切换视频的功能,所以尝试了一下 代码如下 ,点击按钮切换

function a(){$("#jquery_jplayer_1").jPlayer("setMedia", {flv: "/workflowLocal/j/2.flv"});}

服务器上播放效果如下:




http://chatgpt.dhexx.cn/article/ULHIMMxb.shtml

相关文章

ijkplayer支持播放rtsp、jpeg、gif

ijkplayer版本&#xff1a;k.0.8.8 编译环境&#xff1a;Ubuntu 18.04.6 LTS 使用平台&#xff1a;android 支持rtsp播放 默认的ijkplayer并不支持rtsp流的播放&#xff0c;因为在编译ffmpeg的时候并没有开启rtsp的demuxer&#xff0c;所以在编译ffmpeg的时候需要开启rtsp的d…

【ijkplayer】介绍

【ijkplayer】介绍 0x1 系统架构 ijkplayer是由b站开源的播放器项目&#xff0c;底层基于ffmpeg, 支持Android和iOS。下面我们来简单介绍一下Android上的实现。 Android上的系统架构图如下。 下面分别对各个模块进行介绍&#xff1a; 0x11 ijkplayer-example app的实现&a…

一款简洁的 jplayer 音乐播放器完整版

一款简洁 jplayer 音乐播放器&#xff0c;做音乐站很漂亮&#xff0c;直接套用就好了。 效果图&#xff1a; 部分源代码&#xff1a; <div id"lei_jplayer"></div> <div id"jp_container_1"><div class"jp-controls">…

Ijkplayer Android介绍

Ijkplayer Android目录结构 Ijkplayer Android可以将该工程导入android studio进行编译&#xff0c;当它下载好需要的资源文件&#xff08;例如sdk build tool&#xff0c;gradle等&#xff09;就可以进行编译了&#xff0c;该工程的目录结构如下图所示: 链接库&#xff1a…

ijkplayer播放器

播放器系列 android播放器&#xff1a;MediaPlayer ExoPlayer ijkplayer_步基的博客-CSDN博客_mediacodec流程 一 概述 IJKPlayer是一款基于ffmpeg/ffplay的开源播放器&#xff0c;可支持rtmp/rtsp/hls等多种媒体协议&#xff0c;支持Android/IOS等移动平台。项目地址&#xff…

jplayer详解

下载官网&#xff1a;http://www.jplayer.org/ 当前版本&#xff1a;2.3.0 功能&#xff1a;视频播放&#xff08;可全屏&#xff09;、音乐播放 全部原教程&#xff0c;说明并不详细&#xff0c;要结合查看其网页源代码来学习&#xff1a;http://www.jplayer.org/latest/demos…

Javplayer 整合插件版下载使用

Javplayer - 马赛克去除工具 工作中去除图片模糊像素&#xff0c;还原高清图片Javplayer - 马赛克去除工具简介版本安装使用调整示例注意事项体验视频小结咨询 工作中去除图片模糊像素&#xff0c;还原高清图片 Javplayer - 马赛克去除工具简介 JavPlayer是一种视频播放器&am…

jPlayer使用详解

原文地址&#xff1a;http://blog.csdn.net/z295304557/article/details/17298889?_t_t_t0.39512087353182124 下载官网&#xff1a;http://www.jplayer.org/ 当前版本&#xff1a;2.3.0 功能&#xff1a;视频播放&#xff08;可全屏&#xff09;、音乐播放 全部原教程&#x…

jPlayer插件的使用

jPlayer插件的使用 2017年04月21日 11:03:19 JENIFURS 阅读数&#xff1a;3952 标签&#xff1a; jPlayer视频插件兼容bug 更多 个人分类&#xff1a; jQuery 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/fuyujiaof/arti…

JPlayer播放器插件教程,JPlayer项目实战

JPlayer 播放器&#xff1a;基于HTML5/Flash的音频、视频播放器。项目预览&#xff1a;播放器插件预览jPlayer中文官方文档&#xff1a;官网功能强大&#xff0c;操作简便&#xff0c;支持换肤功能。引入JPlayer文件以及样式&#xff1a;<head><script type"text…

TensorFlow 2019

numpy pandas sklearn 算法 神经网络的Math 动手实现网络结构 应用 TensorFlow框架 图像案例 Machine Learning VS Deep Learning 1 特征提取方面 自动 2 数量集 量大/参数大 * 机器学习 &#xff1a; 朴素贝叶斯 决策树 深度学习 &#xff1a; 统称神经网络 3 应…

机器学习练习 8 -异常检测和推荐系统(协同过滤)

1 Anomaly detection&#xff08;异常检测&#xff09; 我们的第一个任务是使用高斯模型来检测数据集中未标记的示例是否应被视为异常。 我们先从简单的二维数据集开始。 之前我们构建的异常检测系统也使用了带标记的数据&#xff0c;与监督学习有些相似&#xff0c;下面的对…

从普通程序员到AI大神,月薪7W的正确打开方式...

“ 前不久&#xff0c;不少人被一段机器人后空翻的视频刷屏了。视频中&#xff0c;双足人形机器人阿特拉斯又是走“梅花桩”&#xff0c;又是秀后空翻&#xff0c;完成了一段精彩绝伦的体操表演。 超强机器人出现&#xff01;分分钟被 AI 惊呆… 要知道阿特拉斯在 2014 年的时候…

Surface Defect Detection Methods for Industrial Products : A Review

Surface Defect Detection Methods for Industrial Products : A Review &#xff08;工业产品表面缺陷检测方法综述 &#xff09; 文章来源&#xff1a;Appl. Sci.2021,11, 7657. https://doi.org/10.3390/app11167657 &#xff08;Yuanyuan Ding&#xff09; 论文亮点&#x…

task_5 - 副本

Task01–Task06树模型与集成学习笔记整理 ****************************************************************************************************************** 1 Task01 信息论基础 决策树分类思想&#xff1a; 用树的节点代表样本集合&#xff0c;通过某些判定条件…

主成分分析(PCA)原理及其python实现

主成分分析 一、概述1.1 问题提出1.2 降维的作用 二、主成分分析(PCA)主要思想三、相关数学知识四、PCA实现步骤4.1 特征值分解矩阵4.2 SVD分解协方差矩阵 五、python程序实现5.1 利用数学公式实现5.2 使用sklearn实现 一、概述 1.1 问题提出 在实际问题研究中&#xff0c;多…

核酸扫码登记体验有感(如何提高OCR的文字正确识别率)

近几年&#xff0c;新冠疫情持续反复&#xff0c;核酸检测已成为了我们日常生活的一部分&#xff0c;甚至有人开玩笑说朋友邻居见面问候语从“吃了吗你&#xff1f;”变成了“今儿核酸了&#xff1f;”。核酸检测全员常态化&#xff0c;需要大量的志愿者协助医生进行身份证扫描…

ORB-SLAM2 特征点法SLAM 单目 双目 rgbd相机SLAM 单应/本质矩阵恢复运动 小图大图地图优化

ORB-SLAM2 ORB特征点法SLAM 支持单目、双目、rgbd相机 安装测试 本文github链接 orbslam2 imu ORB-SLAM是一个基于特征点的实时单目SLAM系统&#xff0c;在大规模的、小规模的、室内室外的环境都可以运行。 该系统对剧烈运动也很鲁棒&#xff0c;支持宽基线的闭环检测和重…

opencv4算法库学习笔记(5万多字超长干货——纪念奋战的自己)

整理于2020年初三个月的日夜积累。。。 参考链接 opencv安装 安装脚本链接&#xff1a;https://github.com/milq/milq/blob/master/scripts/bash/install-opencv.sh 源码编译安装参考&#xff1a;https://blog.csdn.net/liuli2008212/article/details/128169266?spm1001.2…

【数字图像处理课程设计】期中、期末综合考试题目整理总结(共四个图像处理算法应用题)

目录 一、下面两幅图像中有几处不同&#xff0c;编程把它们找出来、并在图中突出显示&#xff08;关键步骤不能调用内置函数&#xff09;。 1.算法原理 2.解题步骤 3.程序代码 4.处理结果 二、下图含有干扰条纹&#xff08;moir pattern&#xff09;、并且低灰度区域的细…