<!-- 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. 爬虫 fake_useragent

    import requests from fake_useragent import UserAgent ua = UserAgent() headers = { "UserAgent&qu ...

  2. Ubuntu安装可视化电脑配置视图工具neofetch

    安装步骤: sudo apt-get install software-properties-common python-software-propertiessudo add-apt-reposit ...

  3. php对接极光推送

    首先要明白php对接极光推送要做些什么,极光推送的大致流程是:你的服务器----->极光服务器------>app端.而php要做的就只有我们的服务器到极光服务器这个过程.极光服务器到ap ...

  4. thinkphp5一键清除缓存

    入口文件定义缓存文件路径常量 define('DS', DIRECTORY_SEPARATOR); defined('APP_PATH') or define('APP_PATH', dirname( ...

  5. python模块学习之HTMLTestRunner模块生成HTML测试报告

    #!/usr/bin/env python #-*- coding:utf-8 -*- from HTMLTestRunner import HTMLTestRunner import time im ...

  6. 基于MFC的Media Player播放器的制作(3---功能实现)

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 下面我们试试一下,按下退出Button退出播放器的功能: 首先,我们双击退出Button按钮,就会弹出下图的框: 上面的弄好之后我们就实现 ...

  7. 从输入url到显示网页,发生了那些事情?

    作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...

  8. Spring入门之生命周期

    好几日没有读东西了,今天本来要读mybatis原理部分,但是看到作者讲,只是学会用不用学那么深,遂直接开干spring,工作中一直用springboot,框架都是领导搭好的,每天的任务就是增删改查,挺 ...

  9. elementUI 限制上传个数limit

    :limit='1' // 个数限制.

  10. 百度地图errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败

    最近要维护以前师兄的一个android项目,里面用到了百度地图,在我的机器上按照官网的方式获取的SHA1签名+包名申请ak: 然而就是报errorcode: 230 uid: -1 appid -1 ...