Mercurial > hgrepos > hgweb.cgi > s4
changeset 996:a50f5b0b2c3d draft
Media player built in viewer box
| author | HIROSE Yuuji <yuuji@gentei.org> |
|---|---|
| date | Sun, 16 Oct 2022 07:56:34 +0859 |
| parents | 9a54ad622318 |
| children | f7cd4528926b |
| files | examples/common/default/videoplay.m4.html s4-media.js |
| diffstat | 2 files changed, 55 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/examples/common/default/videoplay.m4.html Sun Oct 16 07:56:34 2022 +0859 @@ -0,0 +1,31 @@ +Content-type: _CONTENT_TYPE_ + +<!DOCTYPE html> +<html> +<head><title>_TITLE_</title> +<meta charset="utf-8"> +<style type="text/css"> +background: {#eee;} +video#video {max-width: 720px;} +</style> +</head> +<body> +<h1>_TITLE_</h1> +<video id="video" controls> +<source src="_SRC_"> +</video> +<table> + <tr><td>再生速度/Speed</td><td>音量/Volume</td></tr> + <tr><td id="speedval"></td><td id="volval"></td></tr> + <tr><td><input type="range" value="100" id="speed" min="50" max="200"></td> + <td><input type="range" value="100" id="volume" min="0" max="100"></td></tr> +</table> +<p> + + +<span id="speedval"></span> +</p> +<script type="text/javascript" src="s4-media.js"></script> + +</body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/s4-media.js Sun Oct 16 07:56:34 2022 +0859 @@ -0,0 +1,24 @@ +document.addEventListener("DOMContentLoaded", () => { + var vplay = document.getElementById("video"), + spval = document.getElementById("speedval"), + volval = document.getElementById("volval"), + speed = document.getElementById("speed"), + volume = document.getElementById("volume"); + speed.addEventListener("change", (e) => { + console.log(e.target.value); + var rate = e.target.value; + console.log(rate); + spval.innerText = rate+"%"; + vplay.playbackRate = rate/100; + }); + volume.addEventListener("change", (e) => { + console.log(e.target.value); + var rate = e.target.value; + volval.innerText = rate+"%"; + console.log(rate); + vplay.volume = rate/100; + }); + spval.innerText = (speed.value = vplay.playbackRate*100)+"%"; + spval.value = vplay.playbackRate*100; + volval.innerText = (volume.value = (vplay.volume = 0.4)*100) + "%"; +}, false);
