1. <!-- Website Design By: www.happyworm.com -->
  2. <title>Demo : jPlayer as a video playlist player</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <link href="js/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
  5. <script type="text/javascript" src="js/lib/jquery.min.js"></script>
  6. <script type="text/javascript" src="js/js/jplayer/jquery.jplayer.min.js"></script>
  7. <script type="text/javascript" src="js/js/add-on/jplayer.playlist.min.js"></script>
  8. <script type="text/javascript">
  9. //<![CDATA[
  10. $(document).ready(function(){
  11.  
  12.     new jPlayerPlaylist({
  13.         jPlayer: "#jquery_jplayer_1",
  14.         cssSelectorAncestor: "#jp_container_1"
  15.     }, [
  16.         {
  17.             title:"Big Buck Bunny Trailer",
  18.             artist:"Blender Foundation",
  19.             free:true,
  20.             m4v: "media/1.mp4",
  21.             ogv: "media/1.mp4",
  22.             webmv: "media/1.mp4",
  23.             poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
  24.         },
  25.         {
  26.             title:"Finding Nemo Teaser",
  27.             artist:"Pixar",
  28.             m4v: "media/1.mp4",
  29.             ogv: "media/1.mp4",
  30.             webmv: "media/1.mp4",
  31.             poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
  32.         },
  33.         {
  34.             title:"Incredibles Teaser",
  35.             artist:"Pixar",
  36.             m4v: "media/1.mp4",
  37.             ogv: "media/1.mp4",
  38.             webmv: "media/1.mp4",
  39.             poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
  40.         }
  41.     ], {
  42.         swfPath: "../../js/jplayer",
  43.         supplied: "webmv, ogv, m4v",
  44.         useStateClassSkin: true,
  45.         autoBlur: false,
  46.         smoothPlayBar: true,
  47.         keyEnabled: true
  48.     });
  49.  
  50. });
  51. //]]>
  52. </script>
  53. </head>
  54. <body>
  55. <div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player">
  56.     <div class="jp-type-playlist">
  57.         <div id="jquery_jplayer_1" class="jp-jplayer"></div>
  58.         <div class="jp-gui">
  59.             <div class="jp-video-play">
  60.                 <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
  61.             </div>
  62.             <div class="jp-interface">
  63.                 <div class="jp-progress">
  64.                     <div class="jp-seek-bar">
  65.                         <div class="jp-play-bar"></div>
  66.                     </div>
  67.                 </div>
  68.                 <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
  69.                 <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
  70.                 <div class="jp-controls-holder">
  71.                     <div class="jp-controls">
  72.                         <button class="jp-previous" role="button" tabindex="0">previous</button>
  73.                         <button class="jp-play" role="button" tabindex="0">play</button>
  74.                         <button class="jp-next" role="button" tabindex="0">next</button>
  75.                         <button class="jp-stop" role="button" tabindex="0">stop</button>
  76.                     </div>
  77.                     <div class="jp-volume-controls">
  78.                         <button class="jp-mute" role="button" tabindex="0">mute</button>
  79.                         <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
  80.                         <div class="jp-volume-bar">
  81.                             <div class="jp-volume-bar-value"></div>
  82.                         </div>
  83.                     </div>
  84.                     <div class="jp-toggles">
  85.                         <button class="jp-repeat" role="button" tabindex="0">repeat</button>
  86.                         <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
  87.                         <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
  88.                     </div>
  89.                 </div>
  90.                 <div class="jp-details">
  91.                     <div class="jp-title" aria-label="title">&nbsp;</div>
  92.                 </div>
  93.             </div>
  94.         </div>
  95.         <div class="jp-playlist">
  96.             <ul>
  97.                 <!-- The method Playlist.displayPlaylist() uses this unordered list -->
  98.                 <li>&nbsp;</li>
  99.             </ul>
  100.         </div>
  101.         <div class="jp-no-solution">
  102.             <span>Update Required</span>
  103.             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>.
  104.         </div>
  105.     </div>
  106. </div>
  107. </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. ARMv8 内存管理架构.学习笔记

    http://blog.csdn.net/forever_2015/article/details/50285955 版权声明:未经博主允许不得转载,请尊重原创, 谢谢!   目 录 第1章 分级存储 ...

  2. DCloud-Video：Html5 Video 实现方案

    ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...

  3. PHP面试 AJAX基础内容

    AJAX基础内容 Ajax的基本工作原理 Ajax基础概念:通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新 Ajax工作原理:XMLHttpRequest是Ajax的基础     ...

  4. 数据访问层的超级基类AbstractBaseDAL

    using System; using System.Collections; using System.Data; using System.Data.Common; using System.Co ...

  5. 【转】Java类MemoryUsage查看虚拟机的使用情况

    原文地址:https://www.cnblogs.com/xubiao/p/5465473.html Java类MemoryUsage,通过MemoryUsage可以查看Java 虚拟机的内存池的内存 ...

  6. [轉]sendpage漏洞分析 CVE-2009-2692

    之前看了<新爆内核高危漏洞sock_sendpage的利用分析的讨论 >这篇帖子,在九贱兄和诸位CUer的指引下,大致弄清了整个漏洞的始末.现与大家分享(引用自我的空间 ).有什么不足之处 ...

  7. [POI2010]OWC-Sheep

    题目 不难猜到或者发现的性质,如果连了一条对角线划分出了奇数个点,那么这条对角线肯定不合法:因为划分成三角形就不可能有对角线相交,于是划分成奇数的那一边怎么样也不可能划分成全是偶数 于是我们需要对每一 ...

  8. 函数的atguments

    在调用函数时,浏览器每次都会传递进两个隐含的参数: 1.函数的上下文对象this 2.封装实参的对象arguments arguments是一个类数组对象,它也可以用过索引来操作数据,也可以获取长度 ...

  9. Asp.net Controller中View 和Action方法认证Authorize 及对AuthorizeAttribute扩展

    Asp.net Controller中View和Action方法认证Authorize 在建立Web 站点安全性时 1.登录后才可访问系统文件 ——限制 Forms认证 <authenticat ...

  10. 函数高阶（函数，改变函数this指向，高阶函数，闭包，递归）

    一.函数的定义方式 1.函数声明方式 function  关键字(命名函数) 2.函数表达式(匿名函数) 3.new  Function( ) var  fn = new  Function(‘参数1 ...