一、简介

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. NLP&数据挖掘基础知识

    Basis(基础): SSE(Sum of Squared Error, 平方误差和) SAE(Sum of Absolute Error, 绝对误差和) SRE(Sum of Relative Er ...

  2. ASP.NET Core 中文文档 第三章 原理（5）错误处理

    原文:Error Handling 作者:Steve Smith 翻译:谢炀(Kiler) 校对:高嵩(jack2gs).何镇汐 当你的ASP.NET应用发生错误的时候, 你可以采用本文所述的各种方法 ...

  3. base的应用

    ------------父类   public class Person   {       public Person(string name,int age)    {       this.Na ...

  4. android 模拟2048

    利用节日休息时间在ANDROID上进行学习并模拟2048游戏. 效果如下图: 制作思路: 1.画出2048游戏主界面,根据手机屏幕宽高度进行计算并画出每个方块的大小. @Override protec ...

  5. 【无私分享：ASP.NET CORE 项目实战（第九章）】创建区域Areas，添加TagHelper

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在Asp.net Core VS2015中,我们发现还有很多不太简便的地方,比如右击添加视图,转到试图页等功能图不见了,虽然我 ...

  6. JsCharts图表的介绍和简单使用

    一.JSCharts介绍 JScharts是一个用于在浏览器直接绘制图表的javascript工 具包.JScharts支持柱状图.圆饼图以及线性图,可以直接将这个图插入网页, JScharts图的数 ...

  7. 【转】MVC、MVP与MVT

    MVC是Model-View-Control的缩写,Model指的是数据层,View指的是UI层,Control指的是控制层,这三层之间彼此联系.View层的用户行为,触发Control层,Contr ...

  8. observejs改善组件编程体验

    传送门 observejs:https://github.com/kmdjs/observejs 本文演示:http://kmdjs.github.io/observejs/list/ 本文代码:ht ...

  9. asp.net将图片转成二进制存入数据库

    一.代码如下 int code = int.Parse(this.TextBox1.Text);//图片编码 string value = this.FileUpload1.PostedFile.Fi ...

  10. Android Xfermode 学习笔记

    一.概述 Xfermode全名transfer-mode,其作用是实现两张图叠加时的混合效果. 网上流传的关于Xfermode最出名的图来源于AndroidSDK的samples中,名叫Xfermod ...