• HTML5视频播放插件


    首先推上神器

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

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

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

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

    官网:www.jplayer.cn

    英文:www.jplayer.org

    1.准备

    jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf (官网下载)

    还有一个音频文件

    2.代码

    复制代码
    <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

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

  • 相关阅读:
    MongoDB Query 的几个方法
    jQuery日期和时间插件(jqueryuitimepickeraddon.js)中文破解版使用
    entity framework使用技巧
    SQL Server TSQL高级查询
    Visual Studio 2012资源管理器里单击打开改为双击打开文件
    ASP.NET MVC 3发布报错(ASP.NET MVC 3在没有安装环境的服务器上运行)的解决方案
    排序算法时间测试比较
    读书笔记之:C++ STL 开发技术导引3
    如何判断整数x的二进制中含有多少个1
    面试题:2012民生银行总行笔试题
  • 原文地址:https://www.cnblogs.com/txlit/p/7130652.html
Copyright © 2020-2023  润新知