jplayer自定义漂亮的视频皮肤

收藏

jplayer是一个免费的音频和视频插件，支持mp3、mp4(AAC / h),ogg Vorbis / Theora,webm(Vorbis / VP8),wav等格式。之前我们我们分享了http://www.erdangjiade.com/js/76.html' target='_blank'> jquery+jplayer实现歌词同步的mp3音乐播放器效果

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入jquery视频插件

<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.jplayer.min.js"></script>

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

#jquery_jplayer_1将放置我们的视频

控制按钮HTML代码

<div class="jp-controls-holder">
    <!--播放和暂停按钮-->
    <a href="javascript:;" class="jp-play" tabindex="1">play</a>
    <a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
    <span class="separator sep-1"></span>

    <!--进度条-->
    <div class="jp-progress">
        <div class="jp-seek-bar">
            <div class="jp-play-bar"><span></span></div>
        </div>
    </div>

    <!--时间通知-->
    <div class="jp-current-time"></div>
    <span class="time-sep">/</span>
    <div class="jp-duration"></div>
    <span class="separator sep-2"></span>

    <!--是否静音-->
    <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
    <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>

    <!--音量条-->
    <div class="jp-volume-bar">
        <div class="jp-volume-bar-value"><span class="handle"></span></div>
    </div>
    <span class="separator sep-2"></span>

    <!--全屏切换-->
    <a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a>
    <a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a>

</div>

调用jPlayer插件

$(function() {
    $("#jquery_jplayer_1").jPlayer({
        ready: function() {
            $(this).jPlayer("setMedia", {
                m4v: "mi4.m4v", //m4v格式播放
                ogv: "mi4.ogv", //ogv格式播放
                webmv: "mi4.webm", //webm格式播放
                poster: "mi4.png" //封面
            });
        },
        swfPath: "js", //swf路径
        supplied: "webmv, ogv, m4v", //支持播放格式
        size: {//视频尺寸及定义样式
            width: "570px",
            height: "340px",
            cssClass: "jp-video-360p"
        }
    });
});