embedding of youtube videos
This commit is contained in:
marko
3
.gitmodules
vendored
3
.gitmodules
vendored
@@ -4,3 +4,6 @@
|
||||
[submodule "submodules/spyc"]
|
||||
path = submodules/spyc
|
||||
url = https://github.com/mustangostang/spyc.git
|
||||
[submodule "submodules/lite-youtube-embed"]
|
||||
path = submodules/lite-youtube-embed
|
||||
url = https://github.com/paulirish/lite-youtube-embed.git
|
||||
|
||||
@@ -35,47 +35,39 @@ function getCurPagesUrl(){
|
||||
return $pageURL;
|
||||
}
|
||||
|
||||
function youtubeFrame($ytUrl, $from=NULL, $to=NULL){
|
||||
// return "<iframe "
|
||||
// ."src=\"".$ytUrl."\""
|
||||
// .(!empty($from)?("start=\"".$from."\""):"")
|
||||
// .(!empty($to)?("end=\"".$to."\""):"")
|
||||
// ."></iframe>";
|
||||
return "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/TE992jTbkek\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>";
|
||||
}
|
||||
function htmlCardCode($article, $Parsedown){
|
||||
if(
|
||||
empty($article['yaml'])
|
||||
&& empty($article['mdText'])
|
||||
) return "";
|
||||
return
|
||||
"<div class=\"col s12 m6\">"
|
||||
."<div class=\"card blue-grey darken-1\">"
|
||||
."<div class=\"card-image\">"
|
||||
.(
|
||||
$videoFrame = (
|
||||
array_key_exists('yaml', $article)
|
||||
?(
|
||||
array_key_exists('video', $article['yaml'])
|
||||
?(
|
||||
"<video "
|
||||
."style=\"max-width:100%;height: auto;\""
|
||||
." class=\"materialboxed\""
|
||||
." src=\"".$article['yaml']['video']['url']."\""
|
||||
." width=\"".$article['yaml']['video']['width']."\""
|
||||
." height=\"".$article['yaml']['video']['height']."\""
|
||||
." controls"
|
||||
."></video>"
|
||||
"<div style=\"text-align: center;width=100%;height=auto;\">".html5VideoFrame($article['yaml']['video'])."</div>"
|
||||
)
|
||||
:""
|
||||
)
|
||||
:""
|
||||
)
|
||||
."</div>"
|
||||
.(
|
||||
);
|
||||
$ytVideoFrame = (
|
||||
array_key_exists('yaml', $article)
|
||||
?(
|
||||
array_key_exists('youtube', $article['yaml'])
|
||||
?("<div class=\"materialboxed\">".youtubeFrame($article['yaml']['youtube']['url'])."</div>")
|
||||
?(
|
||||
ytLightEmbed($article['yaml']['youtube'])
|
||||
)
|
||||
:""
|
||||
)
|
||||
:""
|
||||
);
|
||||
return
|
||||
"<div class=\"col s12 m6\">"
|
||||
."<div class=\"card blue-grey darken-1\">"
|
||||
."<div class=\"card-image\">"
|
||||
.(!empty($videoFrame)?$videoFrame:$ytVideoFrame)
|
||||
."</div>"
|
||||
."<div class=\"card-content white-text\">"
|
||||
."<span class=\"card-title activator\">"
|
||||
.$article['yaml']['title']
|
||||
@@ -92,6 +84,51 @@ return
|
||||
."</div>"
|
||||
."</div>";
|
||||
}
|
||||
|
||||
//! create the <video>Tag for videoJs
|
||||
function videoJsFrame($item){
|
||||
return "<video "
|
||||
."id=\"".str_replace("/", "-", $item['url'])."\" "
|
||||
."class=\"video-js\" "
|
||||
."controls "
|
||||
."preload=\"auto\" "
|
||||
// ."poster=\"//vjs.zencdn.net/v/oceans.png\""
|
||||
."data-setup='{}' "
|
||||
.">"
|
||||
."<source src=\"".$item['url']."\" type=\"video/webm\">"//</source>"
|
||||
."<p class=\"vjs-no-js\">"
|
||||
."To view this video please enable JavaScript, and consider upgrading to a web browser that "
|
||||
."<a href=\"https://videojs.com/html5-video-support/\" target=\"_blank\">"
|
||||
."supports HTML5 video"
|
||||
."</a>"
|
||||
."</p>"
|
||||
."</video>";
|
||||
}
|
||||
|
||||
function html5VideoFrame($item){
|
||||
return "<video "
|
||||
."style=\"max-width:100%;height: auto;\""
|
||||
." src=\"".$item['url']."\""
|
||||
." width=\"".$item['width']."\""
|
||||
." height=\"".$item['height']."\""
|
||||
." controls"
|
||||
."></video>";
|
||||
}
|
||||
|
||||
//! embed youtube
|
||||
function ytLightEmbed($item){
|
||||
return "<lite-youtube "
|
||||
."videoid=\"".$item['videoid']."\" "
|
||||
// ."playlabel=\"".$title."\""
|
||||
."params=\""
|
||||
."start=".$item['from']
|
||||
."&end=".$item['to']
|
||||
."&modestbranding=1"
|
||||
."&playsinline=0"
|
||||
."&loop=1"
|
||||
."\" "
|
||||
."></lite-youtube>";
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
@@ -105,12 +142,19 @@ return
|
||||
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/js/materialize.min.js"></script>
|
||||
<!--Import Google Icon Font-->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<!-- unpkg : use the latest version of Video.js -->
|
||||
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
|
||||
|
||||
<!-- Include the CSS & JS.. (This could be direct from the package or bundled) -->
|
||||
<link rel="stylesheet" href="lib/lite-youtube-embed/lite-yt-embed.css" />
|
||||
<script src="lib/lite-youtube-embed/lite-yt-embed.js"></script>
|
||||
|
||||
<!--- AutoInit -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var elems = document.querySelectorAll('.materialboxed');
|
||||
var instances = M.Materialbox.init(elems, {
|
||||
var materialboxElements = document.querySelectorAll('.materialboxed');
|
||||
var materialboxInstances = M.Materialbox.init(materialboxElements, {
|
||||
// specify options here
|
||||
});
|
||||
});
|
||||
@@ -148,7 +192,7 @@ return
|
||||
<li><a href="kyu.php?kyu=7">7. Kyu - gelb</a></li>
|
||||
<li><a href="kyu.php?kyu=6">6. Kyu - gelb-orange</a></li>
|
||||
<li><a href="kyu.php?kyu=5">5. Kyu - orange</a></li>
|
||||
<li><a href="kyu.php?kyu=4">5. Kyu - orange-grün</a></li>
|
||||
<li><a href="kyu.php?kyu=4">4. Kyu - orange-grün</a></li>
|
||||
</ul>
|
||||
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
|
||||
<?php
|
||||
|
||||
1
DieJudoGürtelprüfung/lib/lite-youtube-embed
Symbolic link
1
DieJudoGürtelprüfung/lib/lite-youtube-embed
Symbolic link
@@ -0,0 +1 @@
|
||||
../../submodules/lite-youtube-embed/src/
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: "Tsuri-komi-goshi"
|
||||
youtube:
|
||||
url: "https://www.youtube.com/watch?v=TE992jTbkek"
|
||||
videoid: "TE992jTbkek"
|
||||
from: 53
|
||||
to: 89
|
||||
---
|
||||
|
||||
1
submodules/lite-youtube-embed
Submodule
1
submodules/lite-youtube-embed
Submodule
Submodule submodules/lite-youtube-embed added at c19a938c3f
Reference in New Issue
Block a user