最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jplayer自定义漂亮的视频皮肤

来源:http://www.erdangjiade.com/ 沐浴春风 2015-09-10 16:39浏览(1660)

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、程序员加油,技术改变世界。在线 充值

jplayer自定义漂亮的视频皮肤
分类:其它特效 > 视频播放 难易:中级
查看演示

加我微信,拉你进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"
        }
    });
});
标签: 视频jplayervideo
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/494.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    10-16 11:45
    yunxiaoxue027
    很好的 谢谢
  • 头像 沙发
    02-08 20:44
    迷魂
    很好听的英文歌曲
    我很喜欢
1 2