add speed control

This commit is contained in:
eatfishfish
2024-07-16 15:22:15 +08:00
parent 61546ebd6c
commit 83f27ba92c
+11 -9
View File
@@ -89,6 +89,7 @@
<div id="video-frame" class="video-container"></div> <div id="video-frame" class="video-container"></div>
<div> <div>
<input type='button' style="width:100px; height:50px;" onclick='playVideo(lastUrl);' value='Play'> <input type='button' style="width:100px; height:50px;" onclick='playVideo(lastUrl);' value='Play'>
Speed:<input type="number" id="speed" name="tentacles" min="1" max="10" />
<input type='button' style="width:100px; height:50px;" onclick='window.location="/static/index.html";' value='Return'> <input type='button' style="width:100px; height:50px;" onclick='window.location="/static/index.html";' value='Return'>
</div> </div>
<script> <script>
@@ -107,13 +108,13 @@
} }
function getVodUrl() { function getVodUrl() {
console.log("getVodUrl"); //console.log("getVodUrl");
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', uri, true); xhr.open('GET', uri, true);
xhr.onload = function() { xhr.onload = function() {
if (this.status === 200) { if (this.status === 200) {
let arr = this.responseText.split(','); let arr = this.responseText.split(',');
console.log(arr) //console.log(arr)
if (arr.length == 0){ if (arr.length == 0){
alert("No video."); alert("No video.");
return; return;
@@ -127,7 +128,7 @@
content = '<video onended="videoEnded()" id="m3u8Player" class="video-js vjs-default-skin" controls width="360" height="640">\ content = '<video onended="videoEnded()" id="m3u8Player" class="video-js vjs-default-skin" controls width="360" height="640">\
<source id="src_m3u8" src="'+vodUrl+ '" type="application/x-mpegURL">\ <source id="src_m3u8" src="'+vodUrl+ '" type="application/x-mpegURL">\
</video>' </video>'
console.log(content); //console.log(content);
document.getElementById('video-frame').innerHTML = content; document.getElementById('video-frame').innerHTML = content;
init = true; init = true;
} }
@@ -144,7 +145,7 @@
for (i=0; i < arr.length; i++) { for (i=0; i < arr.length; i++) {
if (lastUrl == arr[i]) { if (lastUrl == arr[i]) {
idx = i; idx = i;
console.log(arr[i]); //console.log(arr[i]);
break; break;
} }
} }
@@ -171,7 +172,7 @@
return return
} }
console.log(vodUrl); //console.log(vodUrl);
src = vodUrl; src = vodUrl;
newSource = { newSource = {
@@ -184,8 +185,9 @@
videoPlayer.play(); videoPlayer.play();
} }
document.getElementById('speed').value = 1;
function playVideo(src) { function playVideo(src) {
console.log(src); //console.log(src);
input = document.getElementById('src_m3u8').src input = document.getElementById('src_m3u8').src
document.getElementById('video-frame').style.display=""; document.getElementById('video-frame').style.display="";
const videoPlayer = videojs('m3u8Player'); const videoPlayer = videojs('m3u8Player');
@@ -199,13 +201,13 @@
videoPlayer.ready(function(){ videoPlayer.ready(function(){
videoPlayer.on('loadedmetadata', function(){ videoPlayer.on('loadedmetadata', function(){
console.log("videoPlayer duration:",videoPlayer.duration()); //console.log("videoPlayer duration:",videoPlayer.duration());
videoPlayer.error(null); videoPlayer.error(null);
speed = document.getElementById('speed').value;
this.playbackRate(speed);
})}); })});
videoPlayer.play(); videoPlayer.play();
} }
</script> </script>
</body> </body>