s4
changeset 996:a50f5b0b2c3d
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 diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/examples/common/default/videoplay.m4.html Sun Oct 16 07:56:34 2022 +0859 1.3 @@ -0,0 +1,31 @@ 1.4 +Content-type: _CONTENT_TYPE_ 1.5 + 1.6 +<!DOCTYPE html> 1.7 +<html> 1.8 +<head><title>_TITLE_</title> 1.9 +<meta charset="utf-8"> 1.10 +<style type="text/css"> 1.11 +background: {#eee;} 1.12 +video#video {max-width: 720px;} 1.13 +</style> 1.14 +</head> 1.15 +<body> 1.16 +<h1>_TITLE_</h1> 1.17 +<video id="video" controls> 1.18 +<source src="_SRC_"> 1.19 +</video> 1.20 +<table> 1.21 + <tr><td>再生速度/Speed</td><td>音量/Volume</td></tr> 1.22 + <tr><td id="speedval"></td><td id="volval"></td></tr> 1.23 + <tr><td><input type="range" value="100" id="speed" min="50" max="200"></td> 1.24 + <td><input type="range" value="100" id="volume" min="0" max="100"></td></tr> 1.25 +</table> 1.26 +<p> 1.27 + 1.28 + 1.29 +<span id="speedval"></span> 1.30 +</p> 1.31 +<script type="text/javascript" src="s4-media.js"></script> 1.32 + 1.33 +</body> 1.34 +</html>
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/s4-media.js Sun Oct 16 07:56:34 2022 +0859 2.3 @@ -0,0 +1,24 @@ 2.4 +document.addEventListener("DOMContentLoaded", () => { 2.5 + var vplay = document.getElementById("video"), 2.6 + spval = document.getElementById("speedval"), 2.7 + volval = document.getElementById("volval"), 2.8 + speed = document.getElementById("speed"), 2.9 + volume = document.getElementById("volume"); 2.10 + speed.addEventListener("change", (e) => { 2.11 + console.log(e.target.value); 2.12 + var rate = e.target.value; 2.13 + console.log(rate); 2.14 + spval.innerText = rate+"%"; 2.15 + vplay.playbackRate = rate/100; 2.16 + }); 2.17 + volume.addEventListener("change", (e) => { 2.18 + console.log(e.target.value); 2.19 + var rate = e.target.value; 2.20 + volval.innerText = rate+"%"; 2.21 + console.log(rate); 2.22 + vplay.volume = rate/100; 2.23 + }); 2.24 + spval.innerText = (speed.value = vplay.playbackRate*100)+"%"; 2.25 + spval.value = vplay.playbackRate*100; 2.26 + volval.innerText = (volume.value = (vplay.volume = 0.4)*100) + "%"; 2.27 +}, false);