Skip to content

Instantly share code, notes, and snippets.

@zhanggang807

zhanggang807/h5-video.html

Created February 16, 2019 13:07
Show Gist options
  • Save zhanggang807/f8f275670bb6a5ed2aefd948952139dc to your computer and use it in GitHub Desktop.
Save zhanggang807/f8f275670bb6a5ed2aefd948952139dc to your computer and use it in GitHub Desktop.
Download ZIP
html5 video api study
Raw
h5-video.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html5-video-study</title>
</head>
<body>
<div>
<div id="list1Buttons" style="display:inline; float:left;">
<input type="button" onclick="setCurrentTime(1, this.value)" value='0,10,"yyyy"'><br>
<input type="button" onclick="setCurrentTime(1, this.value)" value='0,20,"xxxx"'><br>
</div>
<video id="h5-video-1" src="./1.mp4" controls="controls"></video>
</div>
<div>
<div id="list1Buttons" style="display:inline; float:left;">
<input type="button" onclick="setCurrentTime(2, this.value)" value='0,1,"eeee"'><br>
<input type="button" onclick="setCurrentTime(2, this.value)" value='0,15,"uuuu"'><br>
</div>
<video id="h5-video-2" src="./2.mp4" controls="controls"></video>
</div>
<input type="button" onclick="getCurrentTime()" value="显示视频1 当前的进度">
<input type="text" id="process1" placeholder="视频1 当前的进度"/>
<script>
function getCurrentTime() {
var video = document.getElementById("h5-video-1")
currentSeconds = video.currentTime
var text = window.prompt('输入节点内容', '')
console.log(Math.floor(currentSeconds / 60), Math.floor(currentSeconds % 60), text)
var process1 = document.getElementById("process1")
process1.value = "" + Math.floor(currentSeconds / 60) + ',' + Math.floor(currentSeconds % 60) + ',' + text;
}
function setCurrentTime(num, value) {
var video = document.getElementById("h5-video-" + num)
var part = value.split(',');
video.currentTime = parseInt(part[0]) * 60 + parseInt(part[1]);
video.autoplay = 'autoplay'
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment