Upgrade MediaElementJS to 2.14.12
This commit just updates the vendor mediaElementJS code so that we can see clearly what changed from upgrading and what our changes are (yes, sadly we have to make modifications to mediaelement-and-player.js's source) so don't focus on QAing this in isolation. the actual changes come in the commit after this. refs: #CNVS-12293 Change-Id: I71f18f8dc8f30acd5cbb0730b1a97065e2aed2e3 Reviewed-on: https://gerrit.instructure.com/34015 Tested-by: Jenkins <jenkins@instructure.com> QA-Review: Clare Strong <clare@instructure.com> Product-Review: Clare Strong <clare@instructure.com> Reviewed-by: Paul Hinze <paulh@instructure.com>
This commit is contained in:
Ryan Shaw
Paul Hinze
parent
059d36868f
commit
9c15db5732
|
|
@ -54,11 +54,11 @@ define [
|
|||
dfd
|
||||
|
||||
# After clicking an image to play the video, load the sources and tracks
|
||||
# for that video then play them with Media Element JS.
|
||||
# for that video then play them with Media Element JS.
|
||||
#
|
||||
# @returns jQuery object
|
||||
# @api private
|
||||
createMediaTag = (options) ->
|
||||
createMediaTag = (options) ->
|
||||
{sourcesAndTracks, mediaType, height, width} = options
|
||||
tag_type = if mediaType is 'video' then 'video' else 'audio'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ desc "Builds mediaelementjs from it's git repo into a form canvas_lms can use wi
|
|||
task :build_media_element_js do
|
||||
require 'fileutils'
|
||||
|
||||
def remove_console(text)
|
||||
text.gsub(/console.(log|debug)\((.*)\);?/, '')
|
||||
end
|
||||
|
||||
repo_path = '../mediaelement'
|
||||
public_path = 'public'
|
||||
repo_location = "https://github.com/johndyer/mediaelement.git"
|
||||
|
|
@ -29,7 +33,8 @@ task :build_media_element_js do
|
|||
'me-plugindetector.js',
|
||||
'me-featuredetection.js',
|
||||
'me-mediaelements.js',
|
||||
'me-shim.js'
|
||||
'me-shim.js',
|
||||
'me-i18n.js'
|
||||
]
|
||||
me_chunks = me_files.map { |file| File.read "#{repo_path}/src/js/#{file}" }
|
||||
|
||||
|
|
@ -54,7 +59,9 @@ task :build_media_element_js do
|
|||
puts "Combining scripts"
|
||||
|
||||
chunks = [rev_msg, "define(['jquery'], function (jQuery){"] + me_chunks + mep_chunks + ["return mejs;\n});\n"]
|
||||
File.open("#{public_path}/javascripts/vendor/mediaelement-and-player.js", 'w') {|f| f.write(chunks.join("\n")) }
|
||||
File.open("#{public_path}/javascripts/vendor/mediaelement-and-player.js", 'w') {|f|
|
||||
f.write(remove_console(chunks.join("\n")))
|
||||
}
|
||||
|
||||
puts "Copying CSS"
|
||||
css = File.read "#{repo_path}/src/css/mediaelementplayer.css"
|
||||
|
|
@ -66,7 +73,9 @@ task :build_media_element_js do
|
|||
img_path = "#{public_path}/images/mediaelement"
|
||||
FileUtils.mkdir_p img_path
|
||||
[ 'src/css/controls.png',
|
||||
'src/css/controls.svg',
|
||||
'src/css/bigplay.png',
|
||||
'src/css/bigplay.svg',
|
||||
'src/css/loading.gif',
|
||||
'build/flashmediaelement.swf',
|
||||
'build/silverlightmediaelement.xap'
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="bigplay-gradient.fw-Page%201" viewBox="0 0 100 200" style="background-color:#ffffff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="100px" height="200px"
>
<defs>
<radialGradient id="gradient1" cx="50%" cy="50%" r="50%">
<stop stop-color="#222222" stop-opacity="0" offset="70%"/>
<stop stop-color="#222222" stop-opacity="0.0118" offset="70.202%"/>
<stop stop-color="#333333" stop-opacity="1" offset="85%"/>
<stop stop-color="#333333" stop-opacity="0" offset="100%"/>
</radialGradient>
<radialGradient id="gradient2" cx="50%" cy="50%" r="50%">
<stop stop-color="#bbbbbb" stop-opacity="0" offset="70%"/>
<stop stop-color="#bbbbbb" stop-opacity="0.0118" offset="70.202%"/>
<stop stop-color="#bbbbbb" stop-opacity="1" offset="85%"/>
<stop stop-color="#bbbbbb" stop-opacity="0" offset="100%"/>
</radialGradient>
<filter id="filter1" x="-100%" y="-100%" width="300%" height="300%">
<!-- Glow -->
<feColorMatrix result="out" in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0"/>
<feMorphology result="out" in="out" operator="dilate" radius="3"/>
<feGaussianBlur result="out" in="out" stdDeviation="1.5"/>
<feBlend in="SourceGraphic" in2="out" mode="normal" result="Glow1"/>
</filter>
<filter id="filter2" x="-100%" y="-100%" width="300%" height="300%">
<!-- Glow -->
<feColorMatrix result="out" in="SourceGraphic" type="matrix" values="0 0 0 0.8667 0 0 0 0 0.8667 0 0 0 0 0.8667 0 0 0 0 0.251 0"/>
<feMorphology result="out" in="out" operator="dilate" radius="3"/>
<feGaussianBlur result="out" in="out" stdDeviation="1.5"/>
<feBlend in="SourceGraphic" in2="out" mode="normal" result="Glow2"/>
</filter>
</defs>
<g id="Background">
</g>
<g id="dark%20shadow">
<path d="M 22 50 C 22 34.5358 34.5358 22 50 22 C 65.4642 22 78 34.5358 78 50 C 78 65.4642 65.4642 78 50 78 C 34.5358 78 22 65.4642 22 50 ZM 5 50 C 5 74.8531 25.1469 95 50 95 C 74.8531 95 95 74.8531 95 50 C 95 25.1469 74.8531 5 50 5 C 25.1469 5 5 25.1469 5 50 Z" fill="url(#gradient1)"/>
<path d="M 22 150 C 22 134.5358 34.5358 122 50 122 C 65.4642 122 78 134.5358 78 150 C 78 165.4642 65.4642 178 50 178 C 34.5358 178 22 165.4642 22 150 ZM 5 150 C 5 174.8531 25.1469 195 50 195 C 74.8531 195 95 174.8531 95 150 C 95 125.1469 74.8531 105 50 105 C 25.1469 105 5 125.1469 5 150 Z" fill="url(#gradient2)"/>
</g>
<g id="dark">
<path id="Polygon" filter="url(#filter1)" d="M 72.5 49.5 L 38.75 68.9856 L 38.75 30.0144 L 72.5 49.5 Z" fill="#ffffff"/>
<path id="Ellipse" d="M 13 50.5 C 13 29.7891 29.7891 13 50.5 13 C 71.2109 13 88 29.7891 88 50.5 C 88 71.2109 71.2109 88 50.5 88 C 29.7891 88 13 71.2109 13 50.5 Z" stroke="#ffffff" stroke-width="5" fill="none"/>
</g>
<g id="light">
<path id="Polygon2" filter="url(#filter2)" d="M 72.5 149.5 L 38.75 168.9856 L 38.75 130.0144 L 72.5 149.5 Z" fill="#ffffff"/>
<path id="Ellipse2" d="M 13 150.5 C 13 129.7891 29.7891 113 50.5 113 C 71.2109 113 88 129.7891 88 150.5 C 88 171.211 71.2109 188 50.5 188 C 29.7891 188 13 171.211 13 150.5 Z" stroke="#ffffff" stroke-width="5" fill="none"/>
</g>
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 654 B After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
Built by: build_media_element_js.rake
|
||||
from https://github.com/johndyer/mediaelement.git
|
||||
revision: 61301a0795cba082b208f11ff8006571085676e8
|
||||
revision: 743f4465231dc20e6f9e96a5cb8b9d5299ceddd3
|
||||
|
||||
YOU SHOULDN'T EDIT ME DIRECTLY
|
||||
*/
|
||||
|
|
@ -27,6 +27,11 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mejs-fullscreen {
|
||||
/* set it to not show scroll bars so 100% will work */
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.mejs-container-fullscreen {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
|
@ -42,12 +47,17 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.mejs-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Start: LAYERS */
|
||||
.mejs-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mejs-mediaelement {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -55,25 +65,35 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mejs-poster {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: contain ;
|
||||
background-position: 50% 50% ;
|
||||
background-repeat: no-repeat ;
|
||||
}
|
||||
:root .mejs-poster img {
|
||||
display: none ;
|
||||
}
|
||||
|
||||
.mejs-poster img {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mejs-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mejs-overlay-play {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mejs-overlay-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -81,11 +101,17 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
margin: -50px 0 0 -50px;
|
||||
background: url(/images/mediaelement/bigplay.png) no-repeat;
|
||||
background: url(/images/mediaelement/bigplay.svg) no-repeat;
|
||||
}
|
||||
.mejs-overlay:hover .mejs-overlay-button{
|
||||
|
||||
.no-svg .mejs-overlay-button {
|
||||
background-image: url(/images/mediaelement/bigplay.png);
|
||||
}
|
||||
|
||||
.mejs-overlay:hover .mejs-overlay-button {
|
||||
background-position: 0 -100px ;
|
||||
}
|
||||
|
||||
.mejs-overlay-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -103,8 +129,9 @@
|
|||
background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
|
||||
background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
|
||||
}
|
||||
|
||||
.mejs-overlay-loading span {
|
||||
display:block;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: transparent url(/images/mediaelement/loading.gif) 50% 50% no-repeat;
|
||||
|
|
@ -115,7 +142,6 @@
|
|||
/* Start: CONTROL BAR */
|
||||
.mejs-container .mejs-controls {
|
||||
position: absolute;
|
||||
background: none;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -143,7 +169,6 @@
|
|||
height: 26px;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
background: 0;
|
||||
font-family: Helvetica, Arial;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -160,17 +185,21 @@
|
|||
height: 16px;
|
||||
width: 16px;
|
||||
border: 0;
|
||||
background: transparent url(/images/mediaelement/controls.png) no-repeat;
|
||||
background: transparent url(/images/mediaelement/controls.svg) no-repeat;
|
||||
}
|
||||
|
||||
.no-svg .mejs-controls .mejs-button button {
|
||||
background-image: url(/images/mediaelement/controls.png);
|
||||
}
|
||||
|
||||
/* :focus for accessibility */
|
||||
.mejs-controls .mejs-button button:focus {
|
||||
outline: solid 1px yellow;
|
||||
outline: dotted 1px #999;
|
||||
}
|
||||
|
||||
/* End: CONTROL BAR */
|
||||
|
||||
/* Start: Time (current / duration) */
|
||||
/* Start: Time (Current / Duration) */
|
||||
.mejs-container .mejs-controls .mejs-time {
|
||||
color: #fff;
|
||||
display: block;
|
||||
|
|
@ -179,44 +208,43 @@
|
|||
padding: 8px 3px 0 3px ;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: auto 4px;
|
||||
box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.mejs-container .mejs-controls .mejs-time span {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 1px 2px 0 0;
|
||||
width: auto;
|
||||
}
|
||||
/* End: Time (current / duration) */
|
||||
/* End: Time (Current / Duration) */
|
||||
|
||||
|
||||
/* Start: Play/pause */
|
||||
/* Start: Play/Pause/Stop */
|
||||
.mejs-controls .mejs-play button {
|
||||
background-position:0 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-pause button {
|
||||
background-position:0 -16px;
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
/* End: Play/pause */
|
||||
|
||||
|
||||
/* Stop */
|
||||
.mejs-controls .mejs-stop button {
|
||||
background-position: -112px 0;
|
||||
}
|
||||
/* End: Play/pause */
|
||||
/* Start: Play/Pause/Stop */
|
||||
|
||||
/* Start: Progress bar */
|
||||
/* Start: Progress Bar */
|
||||
.mejs-controls div.mejs-time-rail {
|
||||
direction: ltr;
|
||||
width: 200px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-time-rail span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -227,6 +255,7 @@
|
|||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-time-rail .mejs-time-total {
|
||||
margin: 5px;
|
||||
background: #333;
|
||||
|
|
@ -238,8 +267,9 @@
|
|||
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
||||
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-time-rail .mejs-time-buffering {
|
||||
width:100%;
|
||||
width: 100%;
|
||||
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
|
|
@ -274,8 +304,8 @@
|
|||
background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-time-rail .mejs-time-current {
|
||||
width: 0;
|
||||
background: #fff;
|
||||
background: rgba(255,255,255,0.8);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
|
||||
|
|
@ -284,6 +314,7 @@
|
|||
background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
||||
background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-time-rail .mejs-time-handle {
|
||||
|
|
@ -321,6 +352,7 @@
|
|||
text-align: center;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
|
@ -334,25 +366,34 @@
|
|||
border-radius: 0;
|
||||
top: 15px;
|
||||
left: 13px;
|
||||
|
||||
}
|
||||
|
||||
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
/*
|
||||
.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
|
||||
visibility:visible;
|
||||
}
|
||||
*/
|
||||
/* End: Progress bar */
|
||||
/* End: Progress Bar */
|
||||
|
||||
/* Start: Fullscreen */
|
||||
.mejs-controls .mejs-fullscreen-button button {
|
||||
background-position:-32px 0;
|
||||
background-position: -32px 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-unfullscreen button {
|
||||
background-position:-32px -16px;
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
/* End: Fullscreen */
|
||||
|
||||
|
|
@ -362,11 +403,11 @@
|
|||
}
|
||||
|
||||
.mejs-controls .mejs-mute button {
|
||||
background-position:-16px -16px;
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-unmute button {
|
||||
background-position:-16px 0;
|
||||
background-position: -16px 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-volume-button {
|
||||
|
|
@ -388,11 +429,13 @@
|
|||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-volume-button:hover {
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
|
||||
display: block;
|
||||
|
|
@ -436,9 +479,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* horizontal version */
|
||||
|
||||
.mejs-controls div.mejs-horizontal-volume-slider {
|
||||
height: 26px;
|
||||
width: 60px;
|
||||
|
|
@ -454,11 +495,9 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1px;
|
||||
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
background: #333;
|
||||
background: rgba(50,50,50,0.8);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
|
||||
|
|
@ -467,7 +506,6 @@
|
|||
background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
||||
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
||||
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
||||
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
|
||||
|
|
@ -479,11 +517,9 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1px;
|
||||
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255,255,255,0.8);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
|
||||
|
|
@ -492,26 +528,21 @@
|
|||
background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
||||
background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
||||
|
||||
}
|
||||
|
||||
|
||||
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* End: Mute/Volume */
|
||||
|
||||
|
||||
|
||||
|
||||
/* Start: TRACK (Captions and Chapters) */
|
||||
/* Start: Track (Captions and Chapters) */
|
||||
.mejs-controls .mejs-captions-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-captions-button button {
|
||||
background-position:-48px 0;
|
||||
background-position: -48px 0;
|
||||
}
|
||||
.mejs-controls .mejs-captions-button .mejs-captions-selector {
|
||||
visibility: hidden;
|
||||
|
|
@ -529,6 +560,7 @@
|
|||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.mejs-controls .mejs-captions-button:hover .mejs-captions-selector {
|
||||
visibility: visible;
|
||||
|
|
@ -542,20 +574,23 @@
|
|||
list-style-type: none !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{
|
||||
|
||||
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
|
||||
margin: 0 0 6px 0;
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
display:block;
|
||||
display: block;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{
|
||||
|
||||
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
|
||||
clear: both;
|
||||
float: left;
|
||||
margin: 3px 3px 0 5px;
|
||||
}
|
||||
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{
|
||||
|
||||
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
|
||||
width: 100px;
|
||||
float: left;
|
||||
padding: 4px 0 0 0;
|
||||
|
|
@ -569,7 +604,6 @@
|
|||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
|
||||
.mejs-chapters {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -578,6 +612,7 @@
|
|||
width: 10000px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mejs-chapters .mejs-chapter {
|
||||
position: absolute;
|
||||
float: left;
|
||||
|
|
@ -593,6 +628,7 @@
|
|||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mejs-chapters .mejs-chapter .mejs-chapter-block {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
|
|
@ -602,12 +638,12 @@
|
|||
border-bottom: solid 1px #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
|
||||
/*background: #333;*/
|
||||
background: #666;
|
||||
background: rgba(102,102,102, 0.7);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
|
||||
|
|
@ -618,39 +654,41 @@
|
|||
background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
|
||||
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
|
||||
}
|
||||
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{
|
||||
|
||||
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
white-space:nowrap;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 0 3px 0;
|
||||
line-height: 12px;
|
||||
}
|
||||
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{
|
||||
|
||||
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
margin: 3px 0 4px 0;
|
||||
display: block;
|
||||
white-space:nowrap;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.mejs-captions-layer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align:center;
|
||||
/*font-weight: bold;*/
|
||||
line-height: 22px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mejs-captions-layer a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mejs-captions-layer[lang=ar] {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
|
|
@ -673,52 +711,50 @@
|
|||
background: rgba(20, 20, 20, 0.8);
|
||||
|
||||
}
|
||||
/* End: TRACK (Captions and Chapters) */
|
||||
/* End: Track (Captions and Chapters) */
|
||||
|
||||
|
||||
|
||||
.mejs-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Start: ERROR */
|
||||
/* Start: Error */
|
||||
.me-cannotplay {
|
||||
}
|
||||
|
||||
.me-cannotplay a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.me-cannotplay span {
|
||||
padding: 15px;
|
||||
display: block;
|
||||
}
|
||||
/* End: ERROR */
|
||||
/* End: Error */
|
||||
|
||||
|
||||
/* Start: Loop */
|
||||
.mejs-controls .mejs-loop-off button{
|
||||
.mejs-controls .mejs-loop-off button {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-loop-on button {
|
||||
background-position: -64px 0;
|
||||
}
|
||||
|
||||
/* End: Loop */
|
||||
|
||||
/* Start: backlight */
|
||||
.mejs-controls .mejs-backlight-off button{
|
||||
.mejs-controls .mejs-backlight-off button {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-backlight-on button {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
/* End: backlight */
|
||||
|
||||
|
||||
/* Start: picture controls */
|
||||
.mejs-controls .mejs-picturecontrols-button{
|
||||
/* Start: Picture Controls */
|
||||
.mejs-controls .mejs-picturecontrols-button {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
/* End: picture controls */
|
||||
/* End: Picture Controls */
|
||||
|
||||
|
||||
/* context menu */
|
||||
|
|
@ -752,8 +788,7 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Start: SourceChooser */
|
||||
/* Start: Source Chooser */
|
||||
.mejs-controls .mejs-sourcechooser-button {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -761,6 +796,7 @@
|
|||
.mejs-controls .mejs-sourcechooser-button button {
|
||||
background-position: -128px 0;
|
||||
}
|
||||
|
||||
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
|
|
@ -785,20 +821,23 @@
|
|||
list-style-type: none !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{
|
||||
|
||||
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
|
||||
margin: 0 0 6px 0;
|
||||
padding: 0;
|
||||
list-style-type: none !important;
|
||||
display:block;
|
||||
display: block;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{
|
||||
|
||||
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
|
||||
clear: both;
|
||||
float: left;
|
||||
margin: 3px 3px 0 5px;
|
||||
}
|
||||
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{
|
||||
|
||||
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
|
||||
width: 100px;
|
||||
float: left;
|
||||
padding: 4px 0 0 0;
|
||||
|
|
@ -806,4 +845,33 @@
|
|||
font-family: helvetica, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
/* End: SourceChooser */
|
||||
/* End: Source Chooser */
|
||||
|
||||
/* Start: Postroll */
|
||||
.mejs-postroll-layer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(/images/mediaelement/background.png);
|
||||
background: rgba(50,50,50,0.7);
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mejs-postroll-layer-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.mejs-postroll-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: url(/images/mediaelement/background.png);
|
||||
background: rgba(50,50,50,0.7);
|
||||
color: #fff;
|
||||
padding: 4px;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* End: Postroll */
|
||||
|
|
|
|||
Loading…
Reference in New Issue