PHP前端开发

HTML5视频播放的详细介绍

百变鹏仔 2个月前 (10-18) #H5教程
文章标签 详细介绍

最近一段时间在使用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.代码

<meta><title>清冽叮咚短信音</title><div>    <div></div>    <div>        <div>            <div>                <ul>                    <li><a>play</a></li>                    <li><a>pause</a></li>                    <li><a>stop</a></li>                    <li><a>mute</a></li>                    <li><a>unmute</a></li>                    <li><a>max volume</a></li>                </ul>                <div>                    <div>                        <div></div>                    </div>                </div>                <div>                    <div></div>                </div>            </div>        </div>    </div></div><script></script><script></script><script>        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>

附:HTML5支持的音频文件

文件格式  媒体类型
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

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