HTML5视频播放的详细介绍

最近一段时间在使用PhoneGap开发一个App应用，App需要播放视频，本想直接使用html5的video，但使用它在全屏播放时不支持横屏播放，只能放弃。最终决定还是自己封装一个播放器算了，免得以后要扩展功能麻烦。

最近迷上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视频播放的详细介绍

相关推荐