一、简介

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. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  2. JS去重及字符串奇数位小写转大写

    面试中经常会考到数组的去重.作为一名合格的前端开发者,不知道几种去重方法是在不应该.废话不多说直接开撸-- 一.indexOf()方法 实现思路:使用indexOf()方法来判断新数组中是否有这个值, ...

  3. ASP.NET Core 中文文档 第三章 原理（15）请求功能

    作者:Steve Smith 翻译:谢炀(kiler398) 校对:姚阿勇(Dr.Yao).孟帅洋(书缘) 涉及到如何处理 HTTP 请求以及响应的独立 Web 服务器功能已经被分解成独立的接口,这些 ...

  4. 怎样写一个webpack loader

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  5. Basic Tutorials of Redis(2) - String

    This post is mainly about how to use the commands to handle the Strings of Redis.And I will show you ...

  6. Autofac 组件、服务、自动装配 《第二篇》

    一.组件 创建出来的对象需要从组件中来获取,组件的创建有如下4种(延续第一篇的Demo,仅仅变动所贴出的代码)方式: 1.类型创建RegisterType AutoFac能够通过反射检查一个类型,选择 ...

  7. C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍

    在前面一系列文章中,我们可以看到微信自定义菜单的重要性,可以说微信公众号账号中,菜单是用户的第一印象,我们要规划好这些菜单的内容,布局等信息.根据微信菜单的定义,我们可以看到,一般菜单主要分为两种,一 ...

  8. jQuery Raty 星级评分

    在线实例 实例演示 使用方法 <div id="star"></div> 复制 $('#star').raty(); 复制 你只需要有一个 div构建Rat ...

  9. Cleave.js – 自动格式化表单输入框的文本内容

    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...

  10. [deviceone开发]-心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...