Hybrid Publishing hybrid publication of the project Volitional Volutions of the Volatile Waters
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
3.9 KiB

<!doctype html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../static/js/draggable.js"></script>
<head>
<link rel="stylesheet" href="../static/css/style.css?q=1280549780">
<title>Gas</title>
</head>
<body id="background_a">
<div>
4 years ago
<div id="audio1">
<audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio>
</div>
<div class="draggable">
<iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="draggable">
<iframe id="video2" width="120" height="120" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4 years ago
</div>
4 years ago
<!-- youtube pop up -->
<div id="show1" class="draggable scaleable-wrapper">
<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
<iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="draggable" style="font-weight: bold; top: 55%; left:40%; width: 500px !important">
<div id="popup">
<a href="#" >Ruhi Su</a>
</div>
</div>
<script>
// draggable video pop up
$("#popup").click(function(){
$("#show1").fadeIn()
console.log("around")
});
</script>
<!-- audio and image pop up -->
<div class="draggable" style="top: 260%; left:0.2%">
<button id="but"><h3>listen</h3></button>
<audio ontimeupdate="playTranscript()" id="a1" controls src="../static/audio/Clip26" class="audio-tag"></audio><a href="" target="_blank">
<div id="transcriptWrapper" class='sub'>
<div id="transcript">
<div><a data-start="0.4" href="#">00:00:00,400</a><img src="../static/images/TheStreamRunsBlurry_scan.png" width='500px' alt="test"></div>
<div><a data-start="8.18" href="#">00:00:08,180</a><img src="../static/images/NilgünMarmara_scan.png" width='500px' alt="test"></div>
</div>
</div>
</body>
<script>
var a1 = document.getElementById("a1"),
but = document.getElementById("but");
but.addEventListener("click", function () {
if (a1.paused) {
a1.play();
} else {
a1.pause();
}
})
a1.addEventListener("play", function(){
but.innerHTML="pause"
})
a1.addEventListener("pause", function(){
but.innerHTML="listen"
})
var links=document.querySelectorAll("div.sub a")
for (var i=0, l=links.length; i<l; i++) {
var a = links[i];
a.addEventListener("click", function(e) {
console.log("CLICK", this);
var t=parseFloat(this.getAttribute("data-start"))
a1.currentTime=t
e.preventDefault()
a1.play();
})
}
</script>
<script>
var dialogueTimings = [0,8],
dialogues = document.querySelectorAll('#transcript>div'),
transcriptWrapper = document.querySelector('#transcriptWrapper'),
audio = document.querySelector('#a1'),
previousDialogueTime = -1;
function playTranscript() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];
transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking','');
currentDialogue.className +=' speaking';
}
}
</script>
</html>