HTML5视频播放的详细介绍

最近迷上hi这个单词，所以我给这个播放器取名叫做：hivideo。

hivideo是一款基于html5的视频播放器，摒弃video原有的播放控制条样式，自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo，全屏播放时还支持横屏播放。

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?1.1.11" type="text/javascript">
    /script>
    script src="jquery.jplayer.min.js?1.1.11" 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视频播放的详细介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！