- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我似乎无法在视频播放器控件上获得正确的样式,因为似乎没有任何内容正确对齐。
我试过将元素包装在 div 和 lis 中,但事情似乎没有正确移动或对齐。
有什么建议吗?
我目前拥有的: http://jsfiddle.net/pp6Wn/
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer() {
// Set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullscreenbtn = document.getElementById("fullscreenbtn");
// Add event listeners
playbtn.addEventListener("click", playPause, false);
seekslider.addEventListener("change", vidSeek, false);
vid.addEventListener("timeupdate", seektimeupdate, false);
mutebtn.addEventListener("click", vidmute, false);
volumeslider.addEventListener("change", setvolume, false);
fullscreenbtn.addEventListener("click", toggleFullScreen, false);
}
window.onload = intializePlayer;
function playPause() {
if (vid.paused) {
vid.play();
playbtn.style.background = "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4IDE4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik03LjAxMSwxNi4yODVjMCwwLjY3Mi0wLjYxMiwxLjIxNS0xLjM2NiwxLjIxNUg0LjIyM2MtMC43NTQsMC0xLjM2NS0wLjU0My0xLjM2NS0xLjIxNVYxLjcxNA0KCQljMC0wLjY3LDAuNjExLTEuMjE0LDEuMzY1LTEuMjE0aDEuNDIyYzAuNzU0LDAsMS4zNjYsMC41NDQsMS4zNjYsMS4yMTRWMTYuMjg1eiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNS4xNDIsMTYuMjg1YzAsMC42NzItMC41ODYsMS4yMTUtMS4zMDgsMS4yMTVoLTEuMzYzYy0wLjcyMywwLTEuMzA4LTAuNTQzLTEuMzA4LTEuMjE1VjEuNzE0DQoJCWMwLTAuNjcsMC41ODUtMS4yMTQsMS4zMDgtMS4yMTRoMS4zNjNjMC43MjIsMCwxLjMwOCwwLjU0NCwxLjMwOCwxLjIxNFYxNi4yODV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==)";
playbtn.style.backgroundSize = "100% 100%";
} else {
vid.pause();
playbtn.style.background = "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSI5MSA5MSAxOCAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyA5MSA5MSAxOCAxOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBvcGFjaXR5PSIwLjk1IiBmaWxsPSIjRkZGRkZGIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTkzLjI1OCw5MS4yMzlsMTQuNjkyLDcuNjgxYzEuMTQxLDAuNTk2LDEuMTQxLDEuNTYzLDAsMi4xNTkNCgkJbC0xNC42OTIsNy42ODNjLTEuMTQsMC41OTctMi4wNjQsMC4wMzctMi4wNjQtMS4yNDhWOTIuNDg3QzkxLjE5NCw5MS4yMDIsOTIuMTE4LDkwLjY0Myw5My4yNTgsOTEuMjM5eiIvPg0KPC9nPg0KPC9zdmc+DQo=)";
playbtn.style.backgroundSize = "100% 100%";
}
}
function vidSeek() {
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate() {
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if (cursecs < 10) {
cursecs = "0" + cursecs;
}
if (dursecs < 10) {
dursecs = "0" + dursecs;
}
if (curmins < 10) {
curmins = "0" + curmins;
}
if (durmins < 10) {
durmins = "0" + durmins;
}
curtimetext.innerHTML = curmins + ":" + cursecs;
durtimetext.innerHTML = durmins + ":" + dursecs;
}
function vidmute() {
if (vid.muted) {
vid.muted = false;
mutebtn.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
function setvolume() {
vid.volume = volumeslider.value / 100;
}
function toggleFullScreen() {
if (vid.requestFullScreen) {
vid.requestFullScreen();
} else if (vid.webkitRequestFullScreen) {
vid.webkitRequestFullScreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
}
}
#video-container,
#playpausebtn,
#fullscreenbtn,
#mutebtn,
#curtimetext,
#durtimetext,
#seekslider,
#volumeslider {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#video-container {
position: relative;
}
div#video_controls_bar {
position: absolute;
background: #61676D;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto 5% auto;
width: 60%;
height: 35px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5%;
padding-left: 5%;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 0;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
-ms-transition: opacity .3s;
transition: opacity .3s;
}
#video-container:hover #video_controls_bar {
opacity: 1;
}
button#playpausebtn {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSI5MSA5MSAxOCAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyA5MSA5MSAxOCAxOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBvcGFjaXR5PSIwLjk1IiBmaWxsPSIjRkZGRkZGIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIgZD0iTTkzLjI1OCw5MS4yMzlsMTQuNjkyLDcuNjgxYzEuMTQxLDAuNTk2LDEuMTQxLDEuNTYzLDAsMi4xNTkNCgkJbC0xNC42OTIsNy42ODNjLTEuMTQsMC41OTctMi4wNjQsMC4wMzctMi4wNjQtMS4yNDhWOTIuNDg3QzkxLjE5NCw5MS4yMDIsOTIuMTE4LDkwLjY0Myw5My4yNTgsOTEuMjM5eiIvPg0KPC9nPg0KPC9zdmc+DQo=);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 7%;
height: 30px;
cursor: pointer;
border: 0;
background-color: red;
}
button#playpausebtn:hover {
cursor: pointer;
}
button#fullscreenbtn {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4IDE4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIG9wYWNpdHk9IjAuOTUiPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNy41LDEyLjU1MWMwLDAuMzg1LTAuMzE0LDAuNjk5LTAuNjk5LDAuNjk5aC0xLjM5MmMtMC4zODUsMC0wLjQ3NywwLjIyMy0wLjIwNCwwLjQ5M2wxLjgxMSwxLjgwNA0KCQljMC4yNzIsMC4yNzEsMC4yNzIsMC43MTcsMC4wMDIsMC45ODlsLTAuNTA3LDAuNTFjLTAuMjcxLDAuMjczLTAuNzE0LDAuMjczLTAuOTg1LDBsLTEuNzgzLTEuNzk3DQoJCWMtMC4yNzEtMC4yNzMtMC40OTItMC4xODMtMC40OTIsMC4yMDJ2MS4zNWMwLDAuMzg1LTAuMzE0LDAuNjk5LTAuNjk5LDAuNjk5aC0wLjcyNmMtMC4zODYsMC0wLjctMC4zMTQtMC43LTAuNjk5di00Ljk3Ng0KCQljMC0wLjM4NiwwLjMxNC0wLjcsMC43LTAuN2g0Ljk3NmMwLjM4NSwwLDAuNjk5LDAuMzE0LDAuNjk5LDAuN1YxMi41NTF6IE0wLjUsMTIuNTUxYzAsMC4zODUsMC4zMTQsMC42OTksMC42OTksMC42OTloMS4zNQ0KCQljMC4zODUsMCwwLjQ3NiwwLjIyMywwLjIwNSwwLjQ5NGwtMS44MDEsMS44MDNjLTAuMjcyLDAuMjcxLTAuMjcyLDAuNzE3LDAsMC45ODhsMC41MTQsMC41MTRjMC4yNzEsMC4yNzIsMC43MTcsMC4yNzIsMC45ODgsMA0KCQlsMS44MDEtMS44MDFjMC4yNzItMC4yNzIsMC40OTUtMC4xOCwwLjQ5NSwwLjIwNXYxLjM0OGMwLDAuMzg1LDAuMzE0LDAuNjk5LDAuNjk5LDAuNjk5aDAuNzI2YzAuMzg1LDAsMC43LTAuMzE0LDAuNy0wLjY5OXYtNC45NzYNCgkJYzAtMC4zODYtMC4zMTQtMC43LTAuNy0wLjdIMS4xOTljLTAuMzg1LDAtMC42OTksMC4zMTQtMC42OTksMC43VjEyLjU1MXogTTE3LjUsNS40NDljMC0wLjM4NS0wLjMxNC0wLjY5OS0wLjY5OS0wLjY5OWgtMS4zOTINCgkJYy0wLjM4NSwwLTAuNDc2LTAuMjIyLTAuMjAyLTAuNDkybDEuODA2LTEuNzg0YzAuMjczLTAuMjcxLDAuMjc0LTAuNzE0LDAuMDAxLTAuOTg0bC0wLjUtMC40OTcNCgkJYy0wLjI3Mi0wLjI3MS0wLjcxNy0wLjI2OS0wLjk4OCwwLjAwNGwtMS43ODMsMS43OTdDMTMuNDcyLDMuMDY3LDEzLjI1LDIuOTc2LDEzLjI1LDIuNTlWMS4xOTljMC0wLjM4NS0wLjMxNC0wLjY5OS0wLjY5OS0wLjY5OQ0KCQloLTAuNzI2Yy0wLjM4NiwwLTAuNywwLjMxNC0wLjcsMC42OTl2NC45NzZjMCwwLjM4NSwwLjMxNCwwLjcsMC43LDAuN2g0Ljk3NmMwLjM4NSwwLDAuNjk5LTAuMzE0LDAuNjk5LTAuN1Y1LjQ0OXogTTAuNSw2LjE3NQ0KCQljMCwwLjM4NSwwLjMxNCwwLjcsMC42OTksMC43aDQuOTc2YzAuMzg1LDAsMC43LTAuMzE0LDAuNy0wLjdWMS4xOTljMC0wLjM4NS0wLjMxNC0wLjY5OS0wLjctMC42OTlINS40NDkNCgkJQzUuMDY0LDAuNSw0Ljc1LDAuODE0LDQuNzUsMS4xOTlWMi41OWMwLDAuMzg1LTAuMjIyLDAuNDc4LTAuNDk1LDAuMjA1bC0xLjgwMS0xLjhDMi4xODMsMC43MjIsMS43MzYsMC43MjEsMS40NjIsMC45OTENCgkJbC0wLjUwNywwLjVjLTAuMjczLDAuMjctMC4yNzQsMC43MTMtMC4wMDEsMC45ODNsMS43OTgsMS43ODRDMy4wMjQsNC41MjgsMi45MzQsNC43NSwyLjU0OSw0Ljc1aC0xLjM1DQoJCUMwLjgxNCw0Ljc1LDAuNSw1LjA2NCwwLjUsNS40NDlWNi4xNzV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 7%;
height: 40px;
cursor: pointer;
border: 0;
background-color: blue;
}
button#mutebtn {
width: 10%;
background-color: green;
}
#curtimetext,
#durtimetext {
width: 5%;
display: inline-block;
vertical-align: middle;
}
input#seekslider {
width: 35%;
height: 20px;
background-color: yellow;
}
input#volumeslider {
width: 10%;
background-color: red;
}
input[type='range'] {
-webkit-appearance: none !important;
background: #384047;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: #6CBB7C;
height: 20px;
width: 20px;
border-radius: 100%;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover {
-webkit-animation: pulse 1s infinite;
}
@-webkit-keyframes pulse {
from {
-webkit-box-shadow: 0 0 2px transparent;
}
50% {
-webkit-box-shadow: 0 0 10px #e74c3c;
}
to {
-webkit-box-shadow: 0 0 2px transparent;
}
}
@media screen and (max-width: 500px) {
#curtimetext,
#durtimetext {
display: none;
}
}
<div id="video-container">
<video id="my_video" width="100%" height="100%">
<source src="http://romain-menard.fr/cours_html5/sitedemo/src/small.mp4" type="video/mp4" />
<source src="video/movie.webm" type="video/webm" />
</video>
<!-- Video Controls -->
<div id="video_controls_bar">
<button id="playpausebtn"></button>
<span id="curtimetext">00:00</span>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1"><span id="durtimetext">00:00</span>
<button id="mutebtn">Mute</button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<button id="fullscreenbtn"></button>
</div>
</div>
这就是我想要的效果
最佳答案
我已经更新了你的 jsfiddle 来为你解决这个问题,你的元素需要添加以下 CSS:
.class{
display: inline-block;
vertical-align: middle;
}
关于css - 样式化 HTML5 视频控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20398864/
我对此很陌生,我在这里的论坛上检查过答案,但我没有找到任何真正可以帮助我的答案。我正在尝试播放 res/raw 文件夹中的视频。到目前为止我已经设置了这段代码: MediaPlayer mp; @Ov
我可以播放一个视频剪辑,检测视频的结尾,然后创建一个表单,然后播放另一个视频剪辑。我的问题是,表单 react 不正确,我创建了带有提交按钮和两个单选按钮可供选择的表单。我希望让用户进行选择,验证响应
首先,我必须说我在web2py讨论组中看到过类似的内容,但我不太理解。 我使用 web2py 设置了一个数据库驱动的网站,其中的条目只是 HTML 文本。其中大多数将包含 img和/或video指向相
我正在尝试在视频 View 中播放 YouTube 视频。 我将 xml 布局如下: 代码是这样的: setContentView(R.layout.webview); VideoV
我正在开发一个需要嵌入其中的 youtube 视频播放器的 android 应用程序。我成功地从 API 获得了 RTSP 视频 URL,但是当我试图在我的 android 视频 View 中加载这个
我目前正在从事一个使用 YouTube API 的网络项目。 我完全不熟悉 API。所以每一行代码都需要付出很多努力。 使用以下代码,我可以成功检索播放列表中的项目: https://www.goog
是否可以仅使用视频 ID 和 key 使用 API V3 删除 youtube 视频?我不断收到有关“必需参数:部分”丢失的错误消息。我用服务器和浏览器 api 键试了一下这是我的代码: // $yo
所以我一直坚持这个大约一个小时左右,我就是无法让它工作。到目前为止,我一直在尝试从字符串中提取整个链接,但现在我觉得只获取视频 ID 可能更容易。 RegEx 需要从以下链接样式中获取 ID/URL,
var app = angular.module('speakout', []).config( function($sceDelegateProvider) {
我正在努力从 RSS 提要中阅读音频、视频新闻。我如何确定该 rss 是用于新闻阅读器还是用于音频或视频? 这是视频源:http://feeds.cbsnews.com/CBSNewsVideo 这是
利用python反转图片/视频 准备:一张图片/一段视频 python库:pillow,moviepy 安装库 ?
我希望在用户双击视频区域时让我的视频全屏显示,而不仅仅是在他们单击控件中的小图标时。有没有办法添加事件或其他东西来控制用户点击视频时发生的情况? 谢谢! 最佳答案 按照 Musa 的建议,附
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
我有一个公司培训视频加载到本地服务器上。我正在使用 HTML5 的视频播放来观看这些视频。该服务器无法访问网络,但我已加载 apache 并且端口 8080 对同一网络上的所有机器开放。 这些文件位于
我想混合来自 video.mp4 的视频(时长 1 分钟)和来自 audio.mp3 的音频(10 分钟持续时间)到一个持续时间为 1 分钟的输出文件中。来自 audio.mp3 的音频应该是从 4
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 8年前关闭。 Improve this questi
我正在尝试使用 peer/getUserMedia 创建一个视频 session 网络应用程序。 目前,当我将唯一 ID 发送到视频 session 时,我能够听到/看到任何加入我的 session
考虑到一段时间内的观看次数,我正在评估一种针对半自动脚本的不同方法,该脚本将对视频元数据执行操作。 简而言之,只要视频达到指标中的某个阈值,就说观看次数,它将触发某些操作。 现在要执行此操作,我将不得
我正在通过iBooks创建专门为iPad创建动态ePub电子书的网站。 它需要支持youtube视频播放,所以当我知道视频的直接路径时,我正在使用html5 标记。 有没有一种使用html5 标签嵌入
我对Android不熟悉,我想浏览youtube.com并在Webview内从网站显示视频。当前,当我尝试执行此操作时,将出现设备的浏览器,并让我使用设备浏览器浏览该站点。如果Webview不具备这种
我是一名优秀的程序员,十分优秀!