<pre code_snippet_id="337288" snippet_file_name="blog_20140510_1_5361656" name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clean jPlayer skin: Example</title>
<link rel="stylesheet" href="/projects/clean-jplayer-skin/player.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/projects/clean-jplayer-skin/jquery.jplayer.js"></script>
<script type="text/javascript" src="/projects/clean-jplayer-skin/jplayer.cleanskin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//视频播放的地址
var media = { m4v: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4',
poster: '/projects/clean-jplayer-skin/Tomorrowland_2013_official_aftermovie.mp4'
}
//jplayer的参数列表
var options = {
//初始化播放器
ready: function () {
$(this).jPlayer("setMedia", media);
},
//自定义样式开关,不开启也不影响
//customCssIds:true;
// Extra Settings
//注意的swf的路径，不能写错的，如果是根目录写一个点
swfPath: "/img/jplayer.swf",
supplied: 'm4v',
solution: 'html, flash',
//音量 总共是1,0.5代表50%;
volume: 0.5,
size: size,
smoothPlayBar: false,
keyEnabled: true,
// CSS Selectors
//播放器器的包裹div的class样式
cssSelectorAncestor: '.playerGUI',
//这是jplayer默认使用的样式，如果根据自己的实际情况修改，
//我记得以前要使用自定义的样式要开启 customCssIds: true,
cssSelector: {
videoPlay: ".video-play",
play: ".play",
pause: ".pause",
seekBar: ".seekBar",
playBar: ".playBar",
volumeBar: ".currentVolume",
volumeBarValue: ".currentVolume .curvol",
currentTime: ".time.current",
duration: ".time.duration",
fullScreen: ".fullScreen",
restoreScreen: ".fullScreenOFF",
gui: ".controls",
noSolution: ".noSolution"
},
//播放器出错 回调函数
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", media).jPlayer('play');
}
//播放器点击播放按钮
play: function() {
$('#player1 .video-play').fadeOut();
$(this).on('click', function() { $('#player1').jPlayer('pause');});
$(this).jPlayer("pauseOthers");
},
//暂回调函数
pause: function() {
$('#player1 .video-play').fadeIn();
$('#player1 .playerScreen').unbind('click');
},
//声音改变回调函数
volumechange: function(event) {
if(event.jPlayer.options.muted) {
$('#player1 .currentVolume').val(0);
} else {
$('#player1 .currentVolume').val(event.jPlayer.options.volume);
}
},
//这个名字不知道有什么用，应该叫进度条好些吧
timeupdate: function(event) {
$('#player1 .seekBar').val(event.jPlayer.status.currentPercentRelative);
},
// 播放完毕后的回调函数
ended: function() {
$(this).jPlayer("setMedia", media);
}
};
// 创建声音控制条
$('#player1 .currentVolume').slider({
range: [0, 1],
step: 0.01,
start : 0.5,
handles: 1,
slide: function() {
var value = $(this).val();
$(mainPlayer).jPlayer("option", "muted", false);
$(mainPlayer).jPlayer("option", "volume", value);
$('#player1 .volumeText').html('Volume: ' + (value * 100).toFixed(0) + '');
}
});
$('#player1 .seekBar').slider({
range: [0,100],
step: 0.01,
start: 0,
handles: 1,
slide: function() {
var value = $(this).val();
$('#player1').jPlayer("playHead", value);
}
});
// Initialize Player
$('#player1').jPlayer(options);
});
</script>
</head>
<body>
<div id="player1" class="playerGUI">
<div id="videoPlayer"></div>
<div class="playerScreen">
<a tabindex="1" href="#" class="video-play"></a>
</div>
<div class="controls">
<div class="leftblock">
<a tabindex="1" href="#" class="play smooth"></a>
<a tabindex="1" href="#" class="pause smooth"></a>
</div>
<div class="progress">
<span>Tomorrowland 2013 - Aftermovie</span>
<div class="progressbar">
<div class="seekBar">
<div class="playBar"></div>
</div>
</div>
<div class="time current">00:00</div>
<div class="time duration">00:00</div>
</div>
<div class="rightblock">
<div class="volumeBar">
<div class="currentVolume"><div class="curvol"></div></div>
</div>
<a class="volumeText">Volume: 50</a>
<a href="#" tabindex="1" class="fullScreen smooth"></a>
<a href="#" tabindex="1" class="fullScreenOFF smooth"></a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
2019-06-01
2782
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
简介：
Clean jPlayer skin: Example $(document).
目录
相关文章
|
Web App开发
前端开发
Java
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
线程的状态有：new、runnable、running、waiting、timed_waiting、blocked、dead 当执行new Thread(Runnabler)后，新创建出来的线程处于new状态，这种线程不可能执行 当执行thread.start()后，线程处于runnable状态，这种情况下只要得到CPU，就可以开始执行了。
734
0
0
|
Web App开发
监控
前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
Hbase依赖的datanode日志中如果出现如下报错信息：DataXceiverjava.io.EOFException:
INFO org.apache.hadoop.hdfs.server.datanode.DataNode: Exception in receiveBlock for block
解决办法：Hbase侧配置的dfs.socket.timeout值过小，与DataNode侧配置的 dfs.socket.timeout的配置不一致，将hbase和datanode的该配置调成大并一致。
799
0
0
|
Web App开发
前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
PipeMapRed.waitOutputThreads(): subprocess failed with code X ，这里code X对应的信息如下：error code 1: Operation not perm...
945
0
0
|
Web App开发
数据库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
可伸缩系统的架构经验
Feb 27th, 2013 |
Comments
最近，阅读了Will Larson的文章Introduction to Architecting System for Scale，感觉很有价值。
2200
0
0
|
Web App开发
前端开发
Java
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
Connection reset by peer的常见原因：
1）服务器的并发连接数超过了其承载量，服务器会将其中一些连接关闭；
如果知道实际连接服务器的并发客户数没有超过服务器的承载量，看下有没有网络流量异常。
860
0
0
|
Web App开发
存储
前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
NoSuchObjectException(message:There is no database named cloudera_manager_metastore_canary_test_db_hive_hivemetastore_df61080e04cd7eb36c4336f71b5a8bc4)
at org.
1080
0
0
|
Web App开发
前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
service cloudera-scm-agent stop
service cloudera-scm-agent stop
umount /var/run/cloudera-scm-agent/process
umo...
760
0
0
|
Web App开发
前端开发
数据库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
cloudera manager的数据库配置文件位置： /etc/cloudera-scm-server/db.properties
678
0
0
|
Web App开发
前端开发
Java
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
本文总结了java中byte转换int时总是与0xff进行与运算的原因。在剖析该问题前请看如下代码：
public static String bytes2HexString(byte[] b) { String ret = ""; for (int i = 0; i < b.
944
0
0
|
Web App开发
前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
1.使用lsmod查看ipv6的模块是否被加载。
lsmod | grep ipv6
[root@dmhadoop011 ~]# lsmod | grep ipv6
ipv6 317340 127 bonding
如果加载了，则进行如下操作：
2.
788
0
0
热门文章
最新文章
1
Java发送Http请求（HttpClient）
2
阿里云虚拟主机HTTPS（HTTP+SSL）加密开通了
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
4
android-async-http框架的学习和使用
5
java: 程序包javax.servlet不存在、 java: 程序包javax.servlet.http不存在 java: 程序包javax.servlet.annotation不存在
6
关于使用HTTP代理IP爬虫采集的认知误区
7
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
8
理解HTTP协议中的multipart/form-data
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta http-equiv="Cont
10
统计http连接数
1
DataWorks操作报错合集之出现HTTP 401错误，表示什么意思
59
2
在微服务架构中，每个服务通常都是一个独立运行、独立部署、独立扩展的组件，它们之间通过轻量级的通信机制（如HTTP/RESTful API、gRPC等）进行通信。
97
3
我们假设要测试一个名为`http://example.com`的网站，并对其进行简单的GET请求性能测试。
72
4
`pytest-httpserver`是一个pytest插件，它允许你在测试期间启动一个轻量级的HTTP服务器，并模拟HTTP请求和响应。
151
5
首先，我们导入了`http.client`模块，它是Python标准库中的一个模块，用于创建和发送HTTP请求。
44
6
我们将使用Python的内置库`http.server`来创建一个简单的Web服务器。虽然这个示例相对简单，但我们可以围绕它展开许多讨论，包括HTTP协议、网络编程、异常处理、多线程等。
84
7
使用`http.server`模块搭建简单HTTP服务器
68
8
RPC调用和HTTP调用的区别你知道吗
57
9
HTTPS与HTTP的一些区别
92
10
网络协议基础：HTTP请求与响应详解
181