一、简介

jPlayer : 基于HTML5/Flash的音频、视频播放器

jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件);

jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页.

jPlayer的丰富API可以让你创建一个个性化多媒体应用，因此也获得越来越多的社区成员的支持和鼓励。

官网:www.jplayer.cn

英文：www.jplayer.org

二、示例

jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官网下载），还要准备一个音频文件

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>清冽叮咚短信音</title>

</head>

<body>

<div id="play-box">

    <div id="jquery_jplayer_1" class="jp-jplayer"></div>

    <div id="jp_container_1" class="jp-audio">

        <div class="jp-type-single">

            <div class="jp-gui jp-interface">

                <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-progress">

                    <div class="jp-seek-bar">

                        <div class="jp-play-bar"></div>

                    </div>

                </div>

                <div class="jp-volume-bar">

                    <div class="jp-volume-bar-value"></div>

                </div>

            </div>

        </div>

    </div>

</div>

<script src="jquery.min.js" type="text/javascript"></script>

<script src="jquery.jplayer.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function toplay(){

        var playerc = $("#jquery_jplayer_1");

        if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) {

            playerc.jPlayer("setMedia", {

                m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用网络资源，自行设定音频文件

            }).jPlayer("play");//jPlayer("play") 用来自动播放

        }else {

            playerc.jPlayer({

                ready: function() {

                    $(this).jPlayer("setMedia", {

                        m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上

                    }).jPlayer("play");//同上

                },

                swfPath: "include/javascript",

                supplied: "m4a"  //acc属于M4A

            });

        }

    }

    setInterval(function(){

         toplay();

    },3000);//3秒循环播放

</script>

</body>

</html>

附：HTML5支持的音频文件

文件格式  媒体类型
MP3　　audio/mpeg
Ogg　　audio/ogg
Wav　　audio/wav

各个浏览器的支持各有有所不同

HTML5实现简单的语音播放

<div>

    <audio id="myaudio" src="@Url.Content("~/Content/audio/dingdong.wav")" controls="controls"  preload="auto" hidden="true"></audio>

    <input type="button" onclick="autoPlay()" value="播放"/>

</div>

<script language="javascript" type="text/javascript">

        var myAuto = document.getElementById('myaudio');

        function autoPlay(){

            myAuto.play();

        }

</script>

HTML5使用jplayer播放音频、视频的更多相关文章

  1. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  2. HTML5（二）音频视频画布

    HTML5 Audio(音频) 定义和用法 <audio src="someaudio.wav" controls="controls"> 您的浏览 ...

  3. 利用开源jPlayer播放.flv视频文件

    最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...

  4. iOS WKWebView 退出后停止播放音频/视频

    带有<video>或者<audio>标签的H5网页在播放音频视频时,退出webview后不会自动停止播放,手动处理一下. 1.注入使网页停止音频.视频播放的JS代码(Swift ...

  5. 解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException

    转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...

  6. HTML5 音频视频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  7. [html5] 学习笔记-html5音频视频

    HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight  或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...

  8. 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  9. HTML5媒体（音频/视频）

    摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...

随机推荐

  1. Yii2的深入学习--行为Behavior

    我们先来看下行为在 Yii2 中的使用,如下内容摘自 Yii2中文文档 行为是 [[yii\base\Behavior]] 或其子类的实例.行为,也称为 mixins,可以无须改变类继承关系即可增强一 ...

  2. 详细分析Android viewpager 无限循环滚动图片

    由于最近在忙于项目,就没时间更新博客了,于是趁着周日在房间把最近的在项目中遇到的技术总结下.最近在项目中要做一个在viewpager无限滚动图片的需求,其实百度一下有好多的例子,但是大部分虽然实现了, ...

  3. 制作自己的MVC框架（一）——简单粗暴的实现

    现在市面上有很多成熟的MVC框架,可以拿来直接用,但自己造一下轮子其实也挺有意思的. 下面先来看个最简单粗暴的MVC实现. 5个文件就能实现最简单的MVC,在Apache中设置一个虚拟目录,配置个简单 ...

  4. 微信开发之Ngrok环境准备

    一.为什么要使用ngrok? 各位肯定都知道,做微信开发,我们的开发服务器需要和微信服务器做交互,SO,我们需要准备一台放置在公网的服务器,能够使得我们的服务器可以正常访问微信服务器,并且微信服务器也 ...

  5. 基于轻量型Web服务器Raspkate的RESTful API的实现

    在上一篇文章中,我们已经了解了Raspkate这一轻量型Web服务器,今天,我们再一起了解下如何基于Raspkate实现简单的RESTful API. 模块 首先让我们了解一下"模块&quo ...

  6. 基于STM32Cube的脉冲输出

    方法一:定时器定时I/O反转生成脉冲波形 1.建立STM32Cube选择STM32F429,我使用的STM32F429-discovery开发板,晶振是8MHz,时钟配置为180M,这样定时器内部时钟 ...

  7. AutoResetEvent ManualResetEvent WaitOne使用注意事项

    公司还用这些老家伙没办法,用了几次这俩.每次用都要重新翻一下A片. 好好的A片楞是翻译成了禅经.把这东西弄成个玄学.微软也是吃枣药丸.参考了@风中灵药的blog.写的牛逼. 还有一些公司用到的风中灵药 ...

  8. thinkphp怎么修改配置进入默认首页

    thinkphp文件夹下config 里面有个convention.php文件 里面有三个配置 'DEFAULT_MODULE' => 'Home', // 默认模块 'DEFAULT_CONT ...

  9. pandas.DataFrame对行和列求和及添加新行和列

    导入模块: from pandas import DataFrame import pandas as pd import numpy as np 生成DataFrame数据 df = DataFra ...

  10. iOS NSDate等时间类的使用

    一.NSDate NSDate对象用来表示一个具体的时间点. NSDate是一个类簇,我们所使用的NSDate对象,都是NSDate的私有子类的实体. NSDate存储的是GMT时间,使用的时候会根据 ...