embedding of youtube videos
This commit is contained in:
marko
3
.gitmodules
vendored
3
.gitmodules
vendored
@@ -4,3 +4,6 @@
|
|||||||
[submodule "submodules/spyc"]
|
[submodule "submodules/spyc"]
|
||||||
path = submodules/spyc
|
path = submodules/spyc
|
||||||
url = https://github.com/mustangostang/spyc.git
|
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;
|
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){
|
function htmlCardCode($article, $Parsedown){
|
||||||
if(
|
if(
|
||||||
empty($article['yaml'])
|
empty($article['yaml'])
|
||||||
&& empty($article['mdText'])
|
&& empty($article['mdText'])
|
||||||
) return "";
|
) return "";
|
||||||
|
$videoFrame = (
|
||||||
|
array_key_exists('yaml', $article)
|
||||||
|
?(
|
||||||
|
array_key_exists('video', $article['yaml'])
|
||||||
|
?(
|
||||||
|
"<div style=\"text-align: center;width=100%;height=auto;\">".html5VideoFrame($article['yaml']['video'])."</div>"
|
||||||
|
)
|
||||||
|
:""
|
||||||
|
)
|
||||||
|
:""
|
||||||
|
);
|
||||||
|
$ytVideoFrame = (
|
||||||
|
array_key_exists('yaml', $article)
|
||||||
|
?(
|
||||||
|
array_key_exists('youtube', $article['yaml'])
|
||||||
|
?(
|
||||||
|
ytLightEmbed($article['yaml']['youtube'])
|
||||||
|
)
|
||||||
|
:""
|
||||||
|
)
|
||||||
|
:""
|
||||||
|
);
|
||||||
return
|
return
|
||||||
"<div class=\"col s12 m6\">"
|
"<div class=\"col s12 m6\">"
|
||||||
."<div class=\"card blue-grey darken-1\">"
|
."<div class=\"card blue-grey darken-1\">"
|
||||||
."<div class=\"card-image\">"
|
."<div class=\"card-image\">"
|
||||||
.(
|
.(!empty($videoFrame)?$videoFrame:$ytVideoFrame)
|
||||||
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>"
|
."</div>"
|
||||||
.(
|
|
||||||
array_key_exists( 'youtube', $article['yaml'])
|
|
||||||
?("<div class=\"materialboxed\">".youtubeFrame($article['yaml']['youtube']['url'])."</div>")
|
|
||||||
:""
|
|
||||||
)
|
|
||||||
."<div class=\"card-content white-text\">"
|
."<div class=\"card-content white-text\">"
|
||||||
."<span class=\"card-title activator\">"
|
."<span class=\"card-title activator\">"
|
||||||
.$article['yaml']['title']
|
.$article['yaml']['title']
|
||||||
@@ -92,6 +84,51 @@ return
|
|||||||
."</div>"
|
."</div>"
|
||||||
."</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>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<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>
|
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/js/materialize.min.js"></script>
|
||||||
<!--Import Google Icon Font-->
|
<!--Import Google Icon Font-->
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<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 -->
|
<!--- AutoInit -->
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
var elems = document.querySelectorAll('.materialboxed');
|
var materialboxElements = document.querySelectorAll('.materialboxed');
|
||||||
var instances = M.Materialbox.init(elems, {
|
var materialboxInstances = M.Materialbox.init(materialboxElements, {
|
||||||
// specify options here
|
// 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=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=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=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>
|
</ul>
|
||||||
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
|
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
|
||||||
<?php
|
<?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"
|
title: "Tsuri-komi-goshi"
|
||||||
youtube:
|
youtube:
|
||||||
url: "https://www.youtube.com/watch?v=TE992jTbkek"
|
videoid: "TE992jTbkek"
|
||||||
from: 53
|
from: 53
|
||||||
to: 89
|
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