HTML5视频播放的详细介绍

PHP中文网 • 2025年3月11日 04:32:39 • 编程技术 • 阅读 2

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

清冽叮咚短信音    
                                                            play
                    pause
                    stop
                    mute
                    unmute
                    max volume
                
                                                            
                    
                
                                    
                
            
        
    
        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秒循环播放