basic video playback support using VideoJS

This commit is contained in:
Zach Prezkuta 2013-05-03 18:17:56 -06:00
parent 04681618da
commit fec4581f34
29 changed files with 5596 additions and 13 deletions

View file

@ -1956,6 +1956,13 @@ if(! function_exists('profile_tabs')){
'title' => t('Photo Albums'),
'id' => 'photo-tab',
),
array(
'label' => t('Videos'),
'url' => $a->get_baseurl() . '/videos/' . $nickname,
'sel' => ((!isset($tab)&&$a->argv[0]=='videos')?'active':''),
'title' => t('Videos'),
'id' => 'video-tab',
),
);
if ($is_owner){

View file

@ -1285,18 +1285,45 @@ function prepare_body($item,$attach = false) {
return $s;
}
$as = '';
$vhead = false;
$arr = explode('[/attach],',$item['attach']);
if(count($arr)) {
$s .= '<div class="body-attach">';
$as .= '<div class="body-attach">';
foreach($arr as $r) {
$matches = false;
$icon = '';
$cnt = preg_match_all('|\[attach\]href=\"(.*?)\" length=\"(.*?)\" type=\"(.*?)\" title=\"(.*?)\"|',$r,$matches, PREG_SET_ORDER);
if($cnt) {
foreach($matches as $mtch) {
$filetype = strtolower(substr( $mtch[3], 0, strpos($mtch[3],'/') ));
$mime = $mtch[3];
if((local_user() == $item['uid']) && ($item['contact-id'] != $a->contact['id']) && ($item['network'] == NETWORK_DFRN))
$the_url = $a->get_baseurl() . '/redir/' . $item['contact-id'] . '?f=1&url=' . $mtch[1];
else
$the_url = $mtch[1];
if(strpos($mime, 'video') !== false) {
if(!$vhead) {
$vhead = true;
$a->page['htmlhead'] .= replace_macros(get_markup_template('videos_head.tpl'), array());
$a->page['end'] .= replace_macros(get_markup_template('videos_end.tpl'), array());
}
$id = end(explode('/', $the_url));
$as .= replace_macros(get_markup_template('video_top.tpl'), array(
'$video' => array(
'id' => $id,
'title' => t('View Video'),
'src' => $the_url,
'mime' => $mime,
),
));
}
$filetype = strtolower(substr( $mime, 0, strpos($mime,'/') ));
if($filetype) {
$filesubtype = strtolower(substr( $mtch[3], strpos($mtch[3],'/') + 1 ));
$filesubtype = strtolower(substr( $mime, strpos($mime,'/') + 1 ));
$filesubtype = str_replace('.', '-', $filesubtype);
}
else {
@ -1320,17 +1347,14 @@ function prepare_body($item,$attach = false) {
$title = ((strlen(trim($mtch[4]))) ? escape_tags(trim($mtch[4])) : escape_tags($mtch[1]));
$title .= ' ' . $mtch[2] . ' ' . t('bytes');
if((local_user() == $item['uid']) && ($item['contact-id'] != $a->contact['id']) && ($item['network'] == NETWORK_DFRN))
$the_url = $a->get_baseurl() . '/redir/' . $item['contact-id'] . '?f=1&url=' . $mtch[1];
else
$the_url = $mtch[1];
$s .= '<a href="' . strip_tags($the_url) . '" title="' . $title . '" class="attachlink" target="external-link" >' . $icon . '</a>';
$as .= '<a href="' . strip_tags($the_url) . '" title="' . $title . '" class="attachlink" target="external-link" >' . $icon . '</a>';
}
}
}
$s .= '<div class="clear"></div></div>';
$as .= '<div class="clear"></div></div>';
}
$s = $s . $as;
// Look for spoiler

View file

@ -381,6 +381,9 @@
}
/* autocomplete @nicknames */
$(".comment-edit-form textarea").contact_autocomplete(baseurl+"/acl");
// setup videos, since VideoJS won't take care of any loaded via AJAX
_V_.autoSetup();
});
}

2
js/main.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,41 @@
WEBVTT
00:00.700 --> 00:04.110
Captions describe all relevant audio for the hearing impaired.
[ Heroic music playing for a seagull ]
00:04.500 --> 00:05.000
[ Splash!!! ]
00:05.100 --> 00:06.000
[ Sploosh!!! ]
00:08.000 --> 00:09.225
[ Splash...splash...splash splash splash ]
00:10.525 --> 00:11.255
[ Splash, Sploosh again ]
00:13.500 --> 00:14.984
Dolphin: eeeEEEEEeeee!
00:14.984 --> 00:16.984
Dolphin: Squawk! eeeEEE?
00:25.000 --> 00:28.284
[ A whole ton of splashes ]
00:29.500 --> 00:31.000
Mine. Mine. Mine.
00:34.300 --> 00:36.000
Shark: Chomp
00:36.800 --> 00:37.900
Shark: CHOMP!!!
00:37.861 --> 00:41.193
EEEEEEOOOOOOOOOOWHALENOISE
00:42.593 --> 00:45.611
[ BIG SPLASH ]

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
_V_.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
</body>
</html>

View file

@ -0,0 +1,499 @@
/*
VideoJS Default Styles (http://videojs.com)
Version 3.2.0
*/
/*
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
background-color: #000; position: relative; padding: 0;
/* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
font-size: 10px;
/* Allow poster to be vertially aligned. */
vertical-align: middle;
/* display: table-cell; */ /*This works in Safari but not Firefox.*/
}
/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
.video-js:-moz-full-screen { position: absolute; }
/* Fullscreen Styles */
body.vjs-full-window {
padding: 0; margin: 0;
height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
}
.video-js.vjs-fullscreen {
position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
_position: absolute; /* IE6 Full-window (underscore hack) */
}
.video-js:-webkit-full-screen {
width: 100% !important; height: 100% !important;
}
/* Poster Styles */
.vjs-poster {
margin: 0 auto; padding: 0; cursor: pointer;
/* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
position: relative; width: 100%; max-height: 100%;
}
/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Individual tracks */
.video-js .vjs-text-track {
display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (IE6) */
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
.video-js .vjs-subtitles { color: #fff; }
.video-js .vjs-captions { color: #fc6; }
.vjs-tt-cue { display: block; }
/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
opacity: 1 !important;
-webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
-moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
-ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
-o-transition: visibility 0s linear 0s, opacity 0.3s linear;
transition: visibility 0s linear 0s, opacity 0.3s linear;
}
.vjs-fade-out {
visibility: hidden !important;
opacity: 0 !important;
-webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
transition: visibility 0s linear 1.5s,opacity 1.5s linear;
}
/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
/* The default control bar. Created by bar.js */
.vjs-default-skin .vjs-controls {
position: absolute;
bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
left: 0; right: 0; /* 100% width of div */
margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
height: 2.6em; /* Including any margin you want above or below control items */
color: #fff; border-top: 1px solid #404040;
/* CSS Gradient */
/* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
background: #242424; /* Old browsers */
background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
/* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
/* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
/* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
visibility: hidden;
opacity: 0;
}
/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
position: relative; float: left;
text-align: center; margin: 0; padding: 0;
height: 2.6em; width: 2.6em;
}
.vjs-default-skin .vjs-control:focus {
outline: 0;
/* background-color: #555;*/
}
/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
/* Play Icon */
.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png') -25px 0; margin: 0.5em auto 0; }
/* Rewind
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }
.vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
.vjs-default-skin .vjs-volume-bar {
position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #666;
background: -moz-linear-gradient(top, #333, #666);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
background: -webkit-linear-gradient(top, #333, #666);
background: -o-linear-gradient(top, #333, #666);
background: -ms-linear-gradient(top, #333, #666);
background: linear-gradient(top, #333, #666);
}
.vjs-default-skin .vjs-volume-level {
position: absolute; top: 0; left: 0; height: 0.6em;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #fff;
background: -moz-linear-gradient(top, #fff, #ccc);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
background: -webkit-linear-gradient(top, #fff, #ccc);
background: -o-linear-gradient(top, #fff, #ccc);
background: -ms-linear-gradient(top, #fff, #ccc);
background: linear-gradient(top, #fff, #ccc);
}
.vjs-default-skin .vjs-volume-handle {
position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
border: 1px solid #fff;
-moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
}
/* Progress
-------------------------------------------------------------------------------- */
.vjs-default-skin div.vjs-progress-control {
position: absolute;
left: 4.8em; right: 4.8em; /* Leave room for time displays. */
height: 1.0em; width: auto;
top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
border-bottom: 1px solid #1F1F1F;
border-top: 1px solid #222;
/* CSS Gradient */
background: #333;
background: -moz-linear-gradient(top, #222, #333);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
background: -webkit-linear-gradient(top, #222, #333);
background: -o-linear-gradient(top, #333, #222);
background: -ms-linear-gradient(top, #333, #222);
background: linear-gradient(top, #333, #222);
/* 1px top shadow */
/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}
/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
position: relative; cursor: pointer !important; /*overflow: hidden;*/
padding: 0; margin: 0; /* Placement within the progress control item */
height: 1.0em;
-moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
/* CSS Gradient */
background: #111;
background: -moz-linear-gradient(top, #111, #262626);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
background: -webkit-linear-gradient(top, #111, #262626);
background: -o-linear-gradient(top, #111, #262626);
background: -ms-linear-gradient(top, #111, #262626);
background: linear-gradient(top, #111, #262626);
}
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
left: 0; top: 0; /*Needed for IE6*/
-moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
/*width: 0;*/
}
.vjs-default-skin .vjs-play-progress {
/* CSS Gradient. */
background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
}
.vjs-default-skin .vjs-load-progress {
opacity: 0.8;
/* CSS Gradient */
background: #666;
background: -moz-linear-gradient(top, #666, #333);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
background: -webkit-linear-gradient(top, #666, #333);
background: -o-linear-gradient(top, #666, #333);
background: -ms-linear-gradient(top, #666, #333);
background: linear-gradient(top, #666, #333);
}
.vjs-default-skin div.vjs-seek-handle {
position: absolute;
width: 16px; height: 16px; /* Match img pixles */
margin-top: -0.3em;
left: 0; top: 0; /*Needed for IE6*/
background: url('video-js.png') 0 -50px;
/* CSS Curved Corners. Needed to make shadows curved. */
-moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
/* CSS Shadows */
-webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-time-controls {
position: absolute;
right: 0;
height: 1.0em; width: 4.8em;
top: -1.3em;
border-bottom: 1px solid #1F1F1F;
border-top: 1px solid #222;
background-color: #333;
font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
background: #333;
background: -moz-linear-gradient(top, #222, #333);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
background: -webkit-linear-gradient(top, #222, #333);
background: -o-linear-gradient(top, #333, #222);
background: -ms-linear-gradient(top, #333, #222);
background: linear-gradient(top, #333, #222);
/* 1px top shadow */
/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}
.vjs-default-skin .vjs-current-time { left: 0; }
.vjs-default-skin .vjs-duration { right: 0; display: none; }
.vjs-default-skin .vjs-remaining-time { right: 0; }
.vjs-time-divider { display:none; }
.vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-secondary-controls { float: right; }
.vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-default-skin .vjs-big-play-button {
display: block; /* Start hidden */ z-index: 2;
position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -42px 0 0 -42px; text-align: center; vertical-align: center; cursor: pointer !important;
border: 0.2em solid #fff; opacity: 0.95;
-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
background: #454545;
background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
/* CSS Shadows */
-webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
}
.vjs-default-skin div.vjs-big-play-button:hover {
-webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
}
.vjs-default-skin div.vjs-big-play-button span {
position: absolute; top: 50%; left: 50%;
display: block; width: 35px; height: 42px;
margin: -20px 0 0 -15px; /* Using negative margin to center image. */
background: url('video-js.png') -100px 0;
}
/* Loading Spinner
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
display: none;
position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
margin: -28px 0 0 -28px;
-webkit-animation-name: rotatethis;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotatethis;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes rotatethis {
0% {-webkit-transform:scale(0.6) rotate(0deg); }
12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
25% {-webkit-transform:scale(0.6) rotate(45deg); }
25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
50% {-webkit-transform:scale(0.6) rotate(135deg);}
50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
75% {-webkit-transform:scale(0.6) rotate(225deg);}
75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
100% {-webkit-transform:scale(0.6) rotate(315deg);}
}
@-moz-keyframes rotatethis {
0% {-moz-transform:scale(0.6) rotate(0deg);}
12.5% {-moz-transform:scale(0.6) rotate(0deg);}
12.51% {-moz-transform:scale(0.6) rotate(45deg);}
25% {-moz-transform:scale(0.6) rotate(45deg);}
25.01% {-moz-transform:scale(0.6) rotate(90deg);}
37.5% {-moz-transform:scale(0.6) rotate(90deg);}
37.51% {-moz-transform:scale(0.6) rotate(135deg);}
50% {-moz-transform:scale(0.6) rotate(135deg);}
50.01% {-moz-transform:scale(0.6) rotate(180deg);}
62.5% {-moz-transform:scale(0.6) rotate(180deg);}
62.51% {-moz-transform:scale(0.6) rotate(225deg);}
75% {-moz-transform:scale(0.6) rotate(225deg);}
75.01% {-moz-transform:scale(0.6) rotate(270deg);}
87.5% {-moz-transform:scale(0.6) rotate(270deg);}
87.51% {-moz-transform:scale(0.6) rotate(315deg);}
100% {-moz-transform:scale(0.6) rotate(315deg);}
}
/* Each circle */
div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #4d4d4d;
background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Button Icon */
.vjs-default-skin .vjs-menu-button div { background: url('video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button ul {
display: none; /* Start hidden. Hover will show. */
opacity: 0.8;
padding: 0; margin: 0;
position: absolute; width: 10em; bottom: 2em; max-height: 15em;
left: -3.5em; /* Width of menu - width of button / 2 */
background-color: #111;
border: 2px solid #333;
-moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
-webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
overflow: auto;
}
.vjs-default-skin .vjs-menu-button:focus ul,
.vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
.vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;
color: #fff; font-weight: bold;
cursor: default;
background: #4d4d4d;
background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
background: -webkit-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -o-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: -ms-linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Subtitles Button */
.vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }
.vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
.vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }

1
library/video-js/video-js.min.css vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 8 KiB

Binary file not shown.

4569
library/video-js/video.js Normal file

File diff suppressed because it is too large Load diff

21
library/video-js/video.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -37,7 +37,12 @@ function attach_init(&$a) {
// Use quotes around the filename to prevent a "multiple Content-Disposition"
// error in Chrome for filenames with commas in them
header('Content-type: ' . $r[0]['filetype']);
header('Content-disposition: attachment; filename="' . $r[0]['filename'] . '"');
header('Content-length: ' . $r[0]['filesize']);
if(isset($_GET['attachment']) && $_GET['attachment'] === '0')
header('Content-disposition: filename="' . $r[0]['filename'] . '"');
else
header('Content-disposition: attachment; filename="' . $r[0]['filename'] . '"');
echo $r[0]['data'];
killme();
// NOTREACHED

323
mod/videos.php Normal file
View file

@ -0,0 +1,323 @@
<?php
require_once('include/items.php');
require_once('include/acl_selectors.php');
require_once('include/bbcode.php');
require_once('include/security.php');
require_once('include/redir.php');
function videos_init(&$a) {
if($a->argc > 1)
auto_redir($a, $a->argv[1]);
if((get_config('system','block_public')) && (! local_user()) && (! remote_user())) {
return;
}
$o = '';
if($a->argc > 1) {
$nick = $a->argv[1];
$r = q("SELECT * FROM `user` WHERE `nickname` = '%s' AND `blocked` = 0 LIMIT 1",
dbesc($nick)
);
if(! count($r))
return;
$a->data['user'] = $r[0];
$o .= '<div class="vcard">';
$o .= '<div class="fn">' . $a->data['user']['username'] . '</div>';
$o .= '<div id="profile-photo-wrapper"><img class="photo" style="width: 175px; height: 175px;" src="' . $a->get_cached_avatar_image($a->get_baseurl() . '/photo/profile/' . $a->data['user']['uid'] . '.jpg') . '" alt="' . $a->data['user']['username'] . '" /></div>';
$o .= '</div>';
/*$sql_extra = permissions_sql($a->data['user']['uid']);
$albums = q("SELECT distinct(`album`) AS `album` FROM `photo` WHERE `uid` = %d $sql_extra order by created desc",
intval($a->data['user']['uid'])
);
if(count($albums)) {
$a->data['albums'] = $albums;
$albums_visible = ((intval($a->data['user']['hidewall']) && (! local_user()) && (! remote_user())) ? false : true);
if($albums_visible) {
$o .= '<div id="side-bar-photos-albums" class="widget">';
$o .= '<h3>' . '<a href="' . $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '">' . t('Photo Albums') . '</a></h3>';
$o .= '<ul>';
foreach($albums as $album) {
// don't show contact photos. We once translated this name, but then you could still access it under
// a different language setting. Now we store the name in English and check in English (and translated for legacy albums).
if((! strlen($album['album'])) || ($album['album'] === 'Contact Photos') || ($album['album'] === t('Contact Photos')))
continue;
$o .= '<li>' . '<a href="photos/' . $a->argv[1] . '/album/' . bin2hex($album['album']) . '" >' . $album['album'] . '</a></li>';
}
$o .= '</ul>';
}
if(local_user() && $a->data['user']['uid'] == local_user()) {
$o .= '<div id="photo-albums-upload-link"><a href="' . $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/upload" >' .t('Upload New Photos') . '</a></div>';
}
$o .= '</div>';
}*/
if(! x($a->page,'aside'))
$a->page['aside'] = '';
$a->page['aside'] .= $o;
$tpl = get_markup_template("videos_head.tpl");
$a->page['htmlhead'] .= replace_macros($tpl,array());
$tpl = get_markup_template("videos_end.tpl");
$a->page['end'] .= replace_macros($tpl,array());
}
return;
}
function videos_post(&$a) {
return;
// DELETED -- look at mod/photos.php if you want to implement
}
function videos_content(&$a) {
// URLs (most aren't currently implemented):
// videos/name
// videos/name/upload
// videos/name/upload/xxxxx (xxxxx is album name)
// videos/name/album/xxxxx
// videos/name/album/xxxxx/edit
// videos/name/video/xxxxx
// videos/name/video/xxxxx/edit
if((get_config('system','block_public')) && (! local_user()) && (! remote_user())) {
notice( t('Public access denied.') . EOL);
return;
}
require_once('include/bbcode.php');
require_once('include/security.php');
require_once('include/conversation.php');
if(! x($a->data,'user')) {
notice( t('No videos selected') . EOL );
return;
}
//$phototypes = Photo::supportedTypes();
$_SESSION['video_return'] = $a->cmd;
//
// Parse arguments
//
if($a->argc > 3) {
$datatype = $a->argv[2];
$datum = $a->argv[3];
}
elseif(($a->argc > 2) && ($a->argv[2] === 'upload'))
$datatype = 'upload';
else
$datatype = 'summary';
if($a->argc > 4)
$cmd = $a->argv[4];
else
$cmd = 'view';
//
// Setup permissions structures
//
$can_post = false;
$visitor = 0;
$contact = null;
$remote_contact = false;
$contact_id = 0;
$owner_uid = $a->data['user']['uid'];
$community_page = (($a->data['user']['page-flags'] == PAGE_COMMUNITY) ? true : false);
if((local_user()) && (local_user() == $owner_uid))
$can_post = true;
else {
if($community_page && remote_user()) {
if(is_array($_SESSION['remote'])) {
foreach($_SESSION['remote'] as $v) {
if($v['uid'] == $owner_uid) {
$contact_id = $v['cid'];
break;
}
}
}
if($contact_id) {
$r = q("SELECT `uid` FROM `contact` WHERE `blocked` = 0 AND `pending` = 0 AND `id` = %d AND `uid` = %d LIMIT 1",
intval($contact_id),
intval($owner_uid)
);
if(count($r)) {
$can_post = true;
$contact = $r[0];
$remote_contact = true;
$visitor = $cid;
}
}
}
}
// perhaps they're visiting - but not a community page, so they wouldn't have write access
if(remote_user() && (! $visitor)) {
$contact_id = 0;
if(is_array($_SESSION['remote'])) {
foreach($_SESSION['remote'] as $v) {
if($v['uid'] == $owner_uid) {
$contact_id = $v['cid'];
break;
}
}
}
if($contact_id) {
$groups = init_groups_visitor($contact_id);
$r = q("SELECT * FROM `contact` WHERE `blocked` = 0 AND `pending` = 0 AND `id` = %d AND `uid` = %d LIMIT 1",
intval($contact_id),
intval($owner_uid)
);
if(count($r)) {
$contact = $r[0];
$remote_contact = true;
}
}
}
if(! $remote_contact) {
if(local_user()) {
$contact_id = $_SESSION['cid'];
$contact = $a->contact;
}
}
if($a->data['user']['hidewall'] && (local_user() != $owner_uid) && (! $remote_contact)) {
notice( t('Access to this item is restricted.') . EOL);
return;
}
$sql_extra = permissions_sql($owner_uid,$remote_contact,$groups);
$o = "";
// tabs
$_is_owner = (local_user() && (local_user() == $owner_uid));
$o .= profile_tabs($a,$_is_owner, $a->data['user']['nickname']);
//
// dispatch request
//
if($datatype === 'upload') {
return; // no uploading for now
// DELETED -- look at mod/photos.php if you want to implement
}
if($datatype === 'album') {
return; // no albums for now
// DELETED -- look at mod/photos.php if you want to implement
}
if($datatype === 'video') {
return; // no single video view for now
// DELETED -- look at mod/photos.php if you want to implement
}
// Default - show recent videos (no upload link for now)
//$o = '';
$r = q("SELECT hash FROM `attach` WHERE `uid` = %d AND filetype LIKE '%%video%%'
$sql_extra GROUP BY hash",
intval($a->data['user']['uid'])
);
if(count($r)) {
$a->set_pager_total(count($r));
$a->set_pager_itemspage(20);
}
$r = q("SELECT hash, `id`, `filename`, filetype FROM `attach`
WHERE `uid` = %d AND filetype LIKE '%%video%%'
$sql_extra GROUP BY hash ORDER BY `created` DESC LIMIT %d , %d",
intval($a->data['user']['uid']),
intval($a->pager['start']),
intval($a->pager['itemspage'])
);
$videos = array();
if(count($r)) {
foreach($r as $rr) {
if($a->theme['template_engine'] === 'internal') {
$alt_e = template_escape($rr['filename']);
$name_e = template_escape($rr['album']);
}
else {
$alt_e = $rr['filename'];
$name_e = $rr['album'];
}
$videos[] = array(
'id' => $rr['id'],
'link' => $a->get_baseurl() . '/videos/' . $a->data['user']['nickname'] . '/video/' . $rr['resource-id'],
'title' => t('View Video'),
'src' => $a->get_baseurl() . '/attach/' . $rr['id'] . '?attachment=0',
'alt' => $alt_e,
'mime' => $rr['filetype'],
'album' => array(
'link' => $a->get_baseurl() . '/videos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($rr['album']),
'name' => $name_e,
'alt' => t('View Album'),
),
);
}
}
$tpl = get_markup_template('videos_recent.tpl');
$o .= replace_macros($tpl, array(
'$title' => t('Recent Videos'),
'$can_post' => $can_post,
'$upload' => array(t('Upload New Videos'), $a->get_baseurl().'/videos/'.$a->data['user']['nickname'].'/upload'),
'$videos' => $videos,
));
$o .= paginate($a);
return $o;
}

View file

@ -1,5 +1,7 @@
#!/bin/bash
command -v uglifyjs >/dev/null 2>&1 || { echo >&2 "I require UglifyJS but it's not installed. Aborting."; exit 1; }
MINIFY_CMD=uglifyjs
JSFILES=(

View file

@ -0,0 +1,22 @@
<div class="video-top-wrapper lframe" id="video-top-wrapper-{{$video.id}}">
{{*<!--<a href="{{$photo.link}}" class="photo-top-photo-link" id="photo-top-photo-link-{{$photo.id}}" title="{{$photo.title}}">
<img src="{{$photo.src}}" alt="{{$photo.alt}}" title="{{$photo.title}}" class="photo-top-photo{{$photo.twist}}" id="photo-top-photo-{{$photo.id}}" />
</a>-->*}}
{{*<video id="video-{{$video.id}}" class="video-js vjs-default-skin"
controls preload="auto" width="480" height="320"
poster="http://video-js.zencoder.com/oceans-clip.png">*}}
{{* v3.2.0 of VideoJS requires that there be a "data-setup" tag in the
<video> element for it to process the tag *}}
{{* set preloading to false to lessen the load on the server *}}
<video id="video-{{$video.id}}" class="video-js vjs-default-skin"
controls preload="false" data-setup="" width="400" height="264">
<source src="{{$video.src}}" type="{{$video.mime}}" />
{{*<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />*}}
</video>
{{*<div class="video-top-album-name"><a href="{{$video.album.link}}" class="video-top-album-link" title="{{$video.album.alt}}" >{{$video.album.name}}</a></div>*}}
</div>

View file

View file

@ -0,0 +1,6 @@
<link href="library/video-js/video-js.min.css" rel="stylesheet">
<script src="library/video-js/video.min.js"></script>
<script>
_V_.options.flash.swf = "https://f.shmuz.in/library/video-js/video-js.swf"
</script>

View file

@ -0,0 +1,11 @@
<h3>{{$title}}</h3>
{{if $can_post}}
{{*<a id="video-top-upload-link" href="{{$upload.1}}">{{$upload.0}}</a>*}}
{{/if}}
<div class="videos">
{{foreach $videos as $video}}
{{include file="video_top.tpl"}}
{{/foreach}}
</div>
<div class="videos-end"></div>

View file

@ -389,6 +389,9 @@
}
/* autocomplete @nicknames */
$j(".comment-edit-form textarea").contact_autocomplete(baseurl+"/acl");
// setup videos, since VideoJS won't take care of any loaded via AJAX
_V_.autoSetup();
});
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,5 @@
<script src="library/video-js/video.min.js"></script>
<script>
_V_.options.flash.swf = "https://f.shmuz.in/library/video-js/video-js.swf"
</script>

View file

@ -0,0 +1,2 @@
<link href="library/video-js/video-js.min.css" rel="stylesheet">

View file

@ -405,6 +405,8 @@
collapseHeight();
// setup videos, since VideoJS won't take care of any loaded via AJAX
_V_.autoSetup();
});
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,5 @@
<script src="library/video-js/video.min.js"></script>
<script>
_V_.options.flash.swf = "https://f.shmuz.in/library/video-js/video-js.swf"
</script>

View file

@ -0,0 +1,2 @@
<link href="library/video-js/video-js.min.css" rel="stylesheet">