jPlayer实例

最新推荐文章于 2025-06-09 09:02:45 发布

原创最新推荐文章于 2025-06-09 09:02:45 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何利用jPlayer库创建一个功能丰富的多媒体播放器，包括音频和视频的支持，详细阐述了配置选项、事件监听以及自定义皮肤的方法，帮助开发者在网页中实现高质量的媒体播放体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- Website Design By: www.happyworm.com -->
    <title>Demo : jPlayer as a video player</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="jPlayer-2.9.2/css/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="jPlayer-2.9.2/js/jquery.jplayer.js" type="text/javascript"></script>
    <script type="text/javascript"> //<![CDATA[
        $(document).ready(function () {
            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        m4v: "10.mp4",
                        poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                    });
                },
                swfPath: "/jPlayer-2.9.2/js",
                supplied: "m4v",
                size: {
                    width: "640px", height: "360px", cssClass: "jp-video-360p"
                },
                smoothPlayBar: true,
                keyEnabled: true


            });

        }); 
          //]]>
    </script>
</head>
<body>
    <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
        <div class="jp-type-single">
            <div id="jquery_jplayer_1" class="jp-jplayer">
            </div>
            <div class="jp-gui">
                <div class="jp-video-play">
                    <button class="jp-video-play-icon" role="button" tabindex="0">
                        play</button>
                </div>
                <div class="jp-interface">
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar">
                            </div>
                        </div>
                    </div>
                    <div class="jp-current-time" role="timer" aria-label="time">
                         </div>
                    <div class="jp-duration" role="timer" aria-label="duration">
                         </div>
                    <div class="jp-controls-holder">
                        <div class="jp-controls">
                            <button class="jp-play" role="button" tabindex="0">
                                play</button>
                            <button class="jp-stop" role="button" tabindex="0">
                                stop</button>
                        </div>
                        <div class="jp-volume-controls">
                            <button class="jp-mute" role="button" tabindex="0">
                                mute</button>
                            <button class="jp-volume-max" role="button" tabindex="0">
                                max volume</button>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value">
                                </div>
                            </div>
                        </div>
                        <div class="jp-toggles">
                            <button class="jp-repeat" role="button" tabindex="0">
                                repeat</button>
                            <button class="jp-full-screen" role="button" tabindex="0">
                                full screen</button>
                        </div>
                    </div>
                    <div class="jp-details">
                        <div class="jp-title" aria-label="title">
                             </div>
                    </div>
                </div>
            </div>
            <div class="jp-no-solution">
                <span>更新要求</span> 要播放媒体，您需要更新您的浏览器到最近的版本或更新您的 <a href="http://get.adobe.com/flashplayer/"
                    target="_blank">Flash插件</a>.
            </div>
        </div>
    </div>
</body>
</html>