94 lines
3.9 KiB
PHP
94 lines
3.9 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Video Works Catalogue.</title>
|
|
<meta name="author" content="Rylie James Thomas">
|
|
<meta name="description" content="A video corpus toy.">
|
|
<link rel="stylesheet" type="text/css" href="vwc_v2-3.css">
|
|
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
<!----- START script for loading videos --><!--
|
|
$(document).ready(function(){
|
|
$("#tagsList1 ul li a").click(function(){
|
|
$("#video1").load("videos #" + $(this).attr("href"));
|
|
return false;
|
|
});
|
|
$("#tagsList2 ul li a").click(function(){
|
|
$("#video2").load("videos #" + $(this).attr("href"));
|
|
return false;
|
|
});
|
|
$("#tagsList3 ul li a").click(function(){
|
|
$("#video3").load("videos #" + $(this).attr("href"));
|
|
return false;
|
|
});
|
|
$("#tagsList4 ul li a").click(function(){
|
|
$("#video4").load("videos #" + $(this).attr("href"));
|
|
return false;
|
|
});
|
|
});
|
|
--><!----- START script for draggable videos --><!--
|
|
function drag_start(event){
|
|
var style = window.getComputedStyle(event.target, null);
|
|
var str = (parseInt(style.getPropertyValue("left")) - event.clientX) + "," + (parseInt(style.getPropertyValue("top")) - event.clientY)+ "," + event.target.id;
|
|
event.dataTransfer.setData("Text",str);
|
|
}
|
|
|
|
function drop(event){
|
|
var offset = event.dataTransfer.getData("Text").split(",");
|
|
var dm = document.getElementById(offset[2]);
|
|
dm.style.left = (event.clientX + parseInt(offset[0],10)) + "px";
|
|
dm.style.top = (event.clientY + parseInt(offset[1],10)) + "px";
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
function drag_over(event){
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
-->
|
|
</script>
|
|
</head>
|
|
<body ondragover="drag_over(event)" ondrop="drop(event)">
|
|
<section id="details">
|
|
<h1><cite>Video Works Catalogue</cite>.</h1>
|
|
<h2>By <a rel="author" href="https://ryliejamesthomas.net/">Rylie James Thomas</a>.</h2>
|
|
<noscript>This page uses JavaScript to allow the videos to be repositioned and to load the playlists. Please consider enabling it.</noscript>
|
|
<details>
|
|
<summary>About</summary>
|
|
<p><cite>Video Works Catalogue</cite> is a tool and a toy, which uses a growing archive of all the video I have ever recorded.</p>
|
|
<p>To use, select a tag from the lists to the left. This will play a sequence of every video filed under that tag. You can play between one and four sequences simultaneously. The windows containing the videos and tags can be dragged round the screen.
|
|
<br>
|
|
You can make a sequence <em class=jargon>fullscreen</em> by clicking on it and then pressing the <kbd>F</kbd> key. Press the <kbd>Esc</kbd> key to return to the original view.</p>
|
|
<hr>
|
|
<p>You can access <a target="_blank" href="https://tildegit.org/rjt/videoworkscatalogue">the source code on Tildegit</a>.</p>
|
|
</details>
|
|
</section>
|
|
<section id="box1" class="box" draggable="true" ondragstart="drag_start(event)">
|
|
<div id="tagsList1" class="tagsList">
|
|
<?php include("tags"); ?>
|
|
</div>
|
|
<div id="video1" class="video"></div>
|
|
</section>
|
|
<section id="box2" class="box" draggable="true" ondragstart="drag_start(event)">
|
|
<div id="tagsList2" class="tagsList">
|
|
<?php include("tags"); ?>
|
|
</div>
|
|
<div id="video2" class="video"></div>
|
|
</section>
|
|
<section id="box3" class="box" draggable="true" ondragstart="drag_start(event)">
|
|
<div id="tagsList3" class="tagsList">
|
|
<?php include("tags"); ?>
|
|
</div>
|
|
<div id="video3" class="video"></div>
|
|
</section>
|
|
<section id="box4" class="box" draggable="true" ondragstart="drag_start(event)">
|
|
<div id="tagsList4" class="tagsList">
|
|
<?php include("tags"); ?>
|
|
</div>
|
|
<div id="video4" class="video"></div>
|
|
</section>
|
|
</body>
|
|
</html>
|