added playground for video embedding
This commit is contained in:
marko
@@ -1,6 +1,7 @@
|
|||||||
RewriteEngine On
|
# Url-Rewriting aktivieren
|
||||||
RewriteBase /
|
RewriteEngine on
|
||||||
|
# Wenn * angefordert wurde und *.php existiert
|
||||||
|
RewriteCond %{REQUEST_FILENAME}.php -f
|
||||||
|
# Hänge ein \.php an
|
||||||
|
RewriteRule ^(.*)$ $1\.php
|
||||||
|
|
||||||
RewriteCond %{REQUEST_FILENAME} !-d
|
|
||||||
RewriteCond %{REQUEST_FILENAME}\.php -f
|
|
||||||
RewriteRule ^(.+)$ $1.php [L]
|
|
||||||
|
|||||||
146
DieJudoGürtelprüfung/vidTest.html
Normal file
146
DieJudoGürtelprüfung/vidTest.html
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>VideoTest</title>
|
||||||
|
|
||||||
|
<!-- Compiled and minified CSS -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.1.0-alpha/dist/css/materialize.min.css">
|
||||||
|
<!-- Compiled and minified JavaScript -->
|
||||||
|
<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 materialboxElements = document.querySelectorAll('.materialboxed');
|
||||||
|
var materialboxInstances = M.Materialbox.init(materialboxElements, {
|
||||||
|
// specify options here
|
||||||
|
});
|
||||||
|
});
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var elems = document.querySelectorAll('.sidenav');
|
||||||
|
var instances = M.Sidenav.init(elems, {
|
||||||
|
// specify options here
|
||||||
|
});
|
||||||
|
});
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var elems = document.querySelectorAll('.modal');
|
||||||
|
var instances = M.Modal.init(elems, {
|
||||||
|
// specify options here
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
h1{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 2.25rem;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size: 2.0rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!--Let browser know website is optimized for mobile-->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<style>
|
||||||
|
ul:not(.browser-default) > li{
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ul id="slide-out" class="sidenav">
|
||||||
|
<li><a href="kyu.php?kyu=8">8. Kyu - weiß-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=5">5. Kyu - orange</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>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12 m6">
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="https://cwsvjudo.lima-city.de/photoalben/photoalben.2020/2020-03-07-FKR/images/2020-03-07-FKR-017.jpg">
|
||||||
|
<span class="card-title">Card Title</span>
|
||||||
|
|
||||||
|
<!-- Modal Trigger -->
|
||||||
|
<a
|
||||||
|
class="btn-floating halfway-fab waves-effect waves-light red modal-trigger"
|
||||||
|
href="#videoJsModal"
|
||||||
|
>
|
||||||
|
<i class="material-icons">play_arrow</i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-content">
|
||||||
|
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Structure -->
|
||||||
|
<div
|
||||||
|
id="videoJsModal"
|
||||||
|
class="modal"
|
||||||
|
style="width: 100%; max-width:100%; height:auto; max-height:100%"
|
||||||
|
>
|
||||||
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat right">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="modal-content" style="width: 100%; max-width:100%; height:auto; max-height:70%" >
|
||||||
|
<video
|
||||||
|
id="videoJsPlayer"
|
||||||
|
style="width: 100%; max-width:100%; height:auto; max-height:70%"
|
||||||
|
class="video-js"
|
||||||
|
controls
|
||||||
|
width="854" height="480"
|
||||||
|
>
|
||||||
|
<source src="http://cwsvjudo.bplaced.net/participo/videos/8terKyu/Ukemi/Ushiro.webm" type="video/webm">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<footer class="page-footer blue-grey darken-1">
|
||||||
|
<div class="container">
|
||||||
|
<div class="col l4 offset-l2 s12">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
title="Seite auf HTML 5 Konformität prüfen"
|
||||||
|
href="http://validator.w3.org/check?uri=<?php echo(urlencode(getCurPagesUrl()));?>"
|
||||||
|
rel="nofollow"
|
||||||
|
>Valid <img
|
||||||
|
src="/ressourcen/graphiken/icons/HTML5_1Color_Black.svg"
|
||||||
|
alt="HTML 5"
|
||||||
|
title="HTML 5 Logo"
|
||||||
|
style="height:1em;display:inline;vertical-align:middle;">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user