jplayer自定义漂亮的视频皮肤_其它特效_视频播放_视频_jplayer

淘建站为您提供更多_其它特效_视频播放_视频_jplayer，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 111 次

下载资源

38 积分

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：其它特效 > 视频播放难易程度：中级

引入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"
        }
    });
});