热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

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

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

范例:













		
		



大部分都是官网上的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"
			});
	}

服务器上播放效果如下:




推荐阅读
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
  • 使用ASP.NET与jQuery实现TextBox内容复制到剪贴板
    本文将介绍如何利用ASP.NET结合jQuery插件,实现将多行文本框(TextBox)中的内容复制到用户的本地剪贴板上。该方法主要适用于Internet Explorer浏览器。 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
  • 深入探讨jQuery中的事件处理、动画效果及表单操作
    本文详细介绍了jQuery这一流行的JavaScript库在事件处理、动画效果实现以及表单操作方面的应用。通过具体的示例和代码片段,帮助开发者更好地理解和运用jQuery的强大功能。 ... [详细]
  • poweroff命令用于安全地关闭计算机的操作系统,并最终切断电源。当确保所有用户已退出系统且所有数据均已妥善保存后,可通过此命令立即执行关机操作。 ... [详细]
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • 本文介绍了如何使用Gradle和gdx-setup.jar工具来创建LibGDX项目,包括详细的步骤和注意事项,适合初学者和有经验的开发者。 ... [详细]
  • Spring Boot 入门指南
    本文介绍了Spring Boot的基本概念及其在现代Java应用程序开发中的作用。Spring Boot旨在简化Spring应用的初始设置和开发过程,通过自动配置和约定优于配置的原则,帮助开发者快速构建基于Spring框架的应用。 ... [详细]
  • 本文详细探讨了Xshell6评估版到期后无法使用的常见问题,并提供了有效的解决方案,包括如何合法购买授权以继续使用。 ... [详细]
  • 本文详细解析了HTML5中nav标签的功能及其在网页设计中的应用,帮助开发者更好地理解和使用这一标签来提升网站的结构化水平。 ... [详细]
  • 本文探讨了使用JQuery UI可调整大小插件时遇到的一个常见问题:如何在用户调整元素大小后避免不必要的点击事件触发,导致元素被意外取消选中。 ... [详细]
  • 本文深入探讨了 Prototype.js 框架及其与 JavaScript 原生 toString() 方法之间的区别,适合对前端开发感兴趣的开发者阅读。文章将帮助读者理解两者在功能实现和应用场景上的不同,从而更好地利用这些工具进行高效编程。 ... [详细]
  • 本周工作重点在于细化用户需求文档,同时深入学习了jQuery的操作技巧及其源码解析。通过阅读知乎上的高质量问答,获取了关于如何有效阅读和理解jQuery源码的专业建议。 ... [详细]
  • 解决MySQL错误2002:无法建立数据库连接
    本文详细描述了在Digital Ocean服务器上托管的多个WordPress站点突然出现数据库连接错误的情况,并提供了有效的解决方案。 ... [详细]
  • 探讨在特定情况下使用 Knockout.js 的 if 或 visible 绑定的最佳实践,特别是在处理未定义对象时的策略。 ... [详细]
author-avatar
傅笑寒
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有