<!-- Website Design By: www.happyworm.com -->

<title>Demo : jPlayer as a video playlist player</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="js/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/lib/jquery.min.js"></script>

<script type="text/javascript" src="js/js/jplayer/jquery.jplayer.min.js"></script>

<script type="text/javascript" src="js/js/add-on/jplayer.playlist.min.js"></script>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function(){

    new jPlayerPlaylist({

        jPlayer: "#jquery_jplayer_1",

        cssSelectorAncestor: "#jp_container_1"

    }, [

        {

            title:"Big Buck Bunny Trailer",

            artist:"Blender Foundation",

            free:true,

            m4v: "media/1.mp4",

            ogv: "media/1.mp4",

            webmv: "media/1.mp4",

            poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"

        },

        {

            title:"Finding Nemo Teaser",

            artist:"Pixar",

            m4v: "media/1.mp4",

            ogv: "media/1.mp4",

            webmv: "media/1.mp4",

            poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"

        },

        {

            title:"Incredibles Teaser",

            artist:"Pixar",

            m4v: "media/1.mp4",

            ogv: "media/1.mp4",

            webmv: "media/1.mp4",

            poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"

        }

    ], {

        swfPath: "../../js/jplayer",

        supplied: "webmv, ogv, m4v",

        useStateClassSkin: true,

        autoBlur: false,

        smoothPlayBar: true,

        keyEnabled: true

    });

});

//]]>

</script>

</head>

<body>

<div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player">

    <div class="jp-type-playlist">

        <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">&nbsp;</div>

                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>

                <div class="jp-controls-holder">

                    <div class="jp-controls">

                        <button class="jp-previous" role="button" tabindex="0">previous</button>

                        <button class="jp-play" role="button" tabindex="0">play</button>

                        <button class="jp-next" role="button" tabindex="0">next</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-shuffle" role="button" tabindex="0">shuffle</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">&nbsp;</div>

                </div>

            </div>

        </div>

        <div class="jp-playlist">

            <ul>

                <!-- The method Playlist.displayPlaylist() uses this unordered list -->

                <li>&nbsp;</li>

            </ul>

        </div>

        <div class="jp-no-solution">

            <span>Update Required</span>

            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.

        </div>

    </div>

</div>

</body>

结果是如下这个样子

16、使用jQuery的html5player播放器，进行播放的更多相关文章

  1. iOS 多个播放器同时播放，双击全屏，单击退出全屏

    前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...

  2. 解决Ubuntu14.04下Clementine音乐播放器不能播放wma文件的问题

    参考:Ubuntu 14.04 安装深度音乐的方法 问题描述:播放wma文件时提示"GStreamer插件未安装". 解决方法:安装gstreamer-ffmpeg插件即可解决问题 ...

  3. 百度播放器SDK 播放MP4格式视频有声音无画面问题解决

    此处为记录解决过程. 所链接使用的MP4格式视频为codec id是mp4v-20.使用手机自带播放器可以播放,使用百度云媒体播放器不能无画面.经调试,Android Baidu-Cloud-Play ...

  4. java调用本地播放器播放视频文件。调用本地播放器不能播放指定文件的说明。

    public class OpenExe extends HttpServlet { //打开本地播放器并播放视频 public static void openExe(String file) { ...

  5. phongap开发中安卓平台上如何调用第三方播放器来播放HLS视频

    前文曾经讲了关于在安卓平台上利用phonegap开发播放HLS的解决方案,其实最好的方案就是自己针对HLS视频开发自己的播放器,但是开发播放器是一个浩大的工程,必须对原生安卓开发非常熟悉,并且对视频播 ...

  6. 【转】C# 视频监控系列（13）：H264播放器——控制播放和截图

    本文原文地址:http://www.cnblogs.com/over140/archive/2009/03/30/1421531.html 阿里云栖社区也有相关的视频开发案例:https://yq.a ...

  7. js-音乐播放器，播放|暂停|滑块的功能

    音乐播放器,播放|暂停|滑块的功能 document.addEventListener('DOMContentLoaded', function loaded(event) { var audio = ...

  8. IOS 集成 Bilibili IJKPlayer播放器，播放rtmp视频流

    因为公司项目需要,我一个连iPhone都没用过的人竟然跑去开发iOS APP.近一段时间一直忙于赶项目,到今天差不多了,所以记录一下当时遇到的各种坑,先从ios 集成 ijkplayer播放器说起! ...

  9. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...

  10. html中嵌入flvplayer.swf播放器，播放视频

    只需要改动红色的代码: <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-4445535411111' codebase='http://downlo ...

随机推荐

  1. 老板让我十分钟上手nx-admin

    大体流程 参考资料: nx-admin项目地址 首先这里就不讲解vue和vuex之类的基础东西了 有兴趣的可以去官方文档了解.这里根据流程走向大概说说 路由配置 首先找到路由配置,路由配置放在了src ...

  2. CTO 技能图谱skill-map

    # CTO 技能图谱 ### 岗位职责* 建立技术团队文化* 规划技术发展路线* 落地产品研发成果* 宣传公司技术品牌* 吸引优秀技术人才 ### 基本素质* 正直诚实的道德修养* 谦虚谨慎的工作态度 ...

  3. Hive 数据类型转换（转）

    原文连接:https://www.iteblog.com/archives/892.html 在<Hive内置数据类型>文章中,我们提到了Hive内置数据类型由基本数据类型和复杂数据类型组 ...

  4. 在IIS7以上导出所有应用程序池的方法批量域名绑定(网站绑定)

    在IIS7+上导出所有应用程序池的方法: %windir%/system32/inetsrv/appcmd list apppool /config /xml > c:/apppools.xml ...

  5. Redis 单机模式，主从模式，哨兵模式(sentinel)，集群模式(cluster)，第三方模式优缺点分析

    Redis 的几种常见使用方式包括: 单机模式 主从模式 哨兵模式(sentinel) 集群模式(cluster) 第三方模式 单机模式 Redis 单副本,采用单个 Redis 节点部署架构,没有备 ...

  6. PHP中global与$GLOBALS的区别

    单一个global是一个关键字,通常附加在变量前,用于将变量声明至全局作用域: $GLOBALS是预定义的超全局变量,把变量扔到里边的话一样可以带到全局去. $GLOBALS 是一个关联数组,每一个变 ...

  7. sql server日志传送实践（基于server 2008 R2）

    SQL Server 2008 R2 主从数据库同步 相关参考:http://blog.itpub.net/30126024/viewspace-2639526/ sql server日志传送(基于s ...

  8. 高级UI晋升之自定义View实战（九）

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 1.前言: 本文采用自定义view的方法来实现一键清除的动画这个功能. 2.效果 ...

  9. python+tushare获取股票和基金每日涨跌停价格

    接口:stk_limit 描述:获取全市场(包含A/B股和基金)每日涨跌停价格,包括涨停价格,跌停价格等,每个交易日8点40左右更新当日股票涨跌停价格. 限量:单次最多提取4800条记录,可循环调取, ...

  10. 如何在Web项目中配置Spring MVC

    要使用Spring MVC需要在Web项目配置文件中web.xml中配置Spring MVC的前端控制器DispatchServlet <servlet> <servlet-name ...