Video support #46
Comments
|
👍 |
|
to add video support you can use video.js. "html" => <<<html
<li><em>{$file}</em>
<video id="video" class="video-js vjs-default-skin" preload="none" controls poster="/poster/{$file}.png">
<source src="/{$currentdir}/{$file}" type="video/mp4" />
</video>
</li>
htmlIn the head of your template, for example board.html add this: <link href="/video-js/video-js.css" rel="stylesheet" type="text/css"/>
<script src="/video-js/video.js"></script>
<script>
videojs.options.flash.swf = "/video-js/video-js.swf"
</script>Your index.php should look something like this: // Other filetypes
$extension = "";
if (preg_match("/.pdf$/i", $file)) $extension = "PDF"; // PDF
if (preg_match("/.zip$/i", $file)) $extension = "ZIP"; // ZIP archive
if (preg_match("/.rar$|.r[0-9]{2,}/i", $file)) $extension = "RAR"; // RAR Archive
if (preg_match("/.tar$/i", $file)) $extension = "TAR"; // TARball archive
if (preg_match("/.gz$/i", $file)) $extension = "GZ"; // GZip archive
if (preg_match("/.doc$|.docx$/i", $file)) $extension = "DOCX"; // Word
if (preg_match("/.ppt$|.pptx$/i", $file)) $extension = "PPTX"; //Powerpoint
if (preg_match("/.xls$|.xlsx$/i", $file)) $extension = "XLXS"; // Excel
if (preg_match("/.ogv$|.mp4$|.mpg$|.mpeg$|.mov$|.avi$|.wmv$|.flv$|.webm$/i", $file)) $extension = "VIDEO"; // video files
if (preg_match("/.aiff$|.aif$|.wma$|.aac$|.flac$|.mp3$|.ogg$|.m4a$/i", $file)) $extension = "AUDIO"; // audio files
if ($extension != "")
{
$files[] = array (
"name" => $file,
"date" => filemtime($currentdir . "/" . $file),
"size" => filesize($currentdir . "/" . $file),
"html" => <<<html
<li><em>{$file}</em>
<video id="video" class="video-js vjs-default-skin" preload="none" controls poster="/poster/{$file}.png">
<source src="/{$currentdir}/{$file}" type="video/mp4" />
</video>
</li>
html
);
}
}
}
closedir($handle);
} else die("ERROR: Could not open ".htmlspecialchars(stripslashes($currentdir))." for reading!");Then make some css changes, create poster directory and poster images for each video. Changes for css: in board.html /*----responsive----*/
#gallery li {
width: 32%;
height: 0;
padding-bottom: 32%;
}in video.js.css sommeting like this: .video-js {
background-color: #000;
top: 60px;
position: relative;
padding: 0;
min-width: 100%;
min-height: 100%;
width: 200px;Working fine for me with mp4, ogv and webm formats |
|
@tmos @nicosomb @thomas30 Hey sorry I forgot this for some reason. I think I'll close for now, as we have basic video support since #49. Now, I think it was agreed that removing mediabox would be a good idea, then settle on a modern lightbox that supports video (see the discussion at the end of #49) @thomas30 videojs is nice, do you know a lightbox that uses it? We could start a new branch, start by removing mediabox to keep things clear, and then work on adding a proper one. What do you think? Discussion about the new lightbox is in #44 |
Would be good to add support for video files using simple html5
<media>tags (no player library).The text was updated successfully, but these errors were encountered: