mp3播放

<!--audio start  影音播放-->
<DIV class="weixinAudio" style="display:none;">
            <audio src="" id="media" width="1" height="1" preload></audio>
            <span id="audio_area" class="db audio_area">
                <span class="audio_wrp db">
                    <span class="audio_play_area">
                        <i class="icon_audiodefault"><img src="/images/shengyin02.png" alt=""></i>
                        <i class="icon_audioplaying"><img src="/images/shengyin.png" alt=""></i>
                    </span>
                    <span id="audio_length" class="audio_length tips_global"></span>
                    <span id="curent_time">0:00</span>
                    <span class="db audio_info_area">
                        <strong class="db audio_title">成飞建筑材料责任有限公司宣传片配音</strong>
                    </span>
                    <span id="int_c"></span>
                    <span class="progress_bar_box" style="width:1100px">
                    <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
            </span>
                </span>
            </span>

</DIV>
    <script src="/js/jquery-1.10.2.js"></script>
    <script src="/js/weixinaudio.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    var videosrc = '';
$(".yangyin_list ul li").click(function(){
    var onindex = $(this).index();
    var ontitle = $(this).find(".yangyin_tit").html();
   $(".weixinAudio .audio_info_area strong").html(ontitle);
   $(".weixinAudio").toggle();
   videosrc = $(this).data("video");
   $(".weixinAudio audio").src=videosrc;
  
   $('.weixinAudio').weixinAudio({
            autoplay:true,
            src:videosrc,
        });
}

)


        
    </script>
    <script>
        var a=0;
        $(".audio_play_area").click(function () {
                a++;
            if(a%2!=0){
                $(".icon_audiodefault").css({"display":"none"});
                $(".icon_audioplaying").css({"display":"block"});
                console.log(a);
            }
            if(a%2==0){
                console.log(a);
                $(".icon_audiodefault").css({"display":"block"});
                $(".icon_audioplaying").css({"display":"none"});
                }



        })
    </script>
<!--audio end-->

jq引用还不能错

 

附加：video标签播放，控制开始暂停等，加 controls

<video id="shiping" height="500px;"width="850px;" autoplay="" controls>
    <source src="videosource" type="video/mp4">
    <source src="videosource" type="video/ogg">

</video>

 

转载于:https://www.cnblogs.com/html5redbird/p/11454232.html