video视频播放
Posted xiaokemo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了video视频播放相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Video Player w/ React & GSAP ??</title>
<style type="text/css">
#myvideo{
width: 800px;
height: 600px;
margin: 0 auto;
}
h3{
font-size: 20px;
}
.my_show{
width: 800px;
height: 600px;
border: solid 1px gray;
}
</style>
</head>
<body>
<h3>我的音乐我做主</h3>
<video id="myvideo" controls autoplay>
<source src="video/de2.mp4" type="video/mp4">
</video>
<div>
播放时间:
<span id="showTime"></span>
</div>
<br>
<div id="buttonDiv">
<input type="button" value="播放/暂停" onclick="PlayorPause()">
<input type="button" value="增加音量" onclick="AddYin()">
<input type="button" value="减小音量" onclick="MinYin()">
<input type="button" value="设置静音" onclick="JingYin()" id="SetMuted">
</div>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var video=document.getElementById("myvideo");
var showTime=document.getElementById("showTime");
if(video.canPlayType){
video.addEventListener("timeupdate",TimeUpdate,false);
}
//格式化播放时间
function TimeUpdate(){
var ct=video.currentTime;
var st=video.duration;
var ctStr=RunTime(parseInt(ct/60))+":"+RunTime(parseInt(st%60));
var stStr=RunTime(parseInt(st/60))+":"+RunTime(parseInt(st%60));
showTime.innerHTML=ctStr+"|"+stStr;
}
function RunTime(num){
var len=num.toString().length;
while(len<2){
num="0"+num;
len++;
}
return num;
}
//播放/暂停
function PlayorPause(){
if(video.paused){
video.play();
}else{
video.pause();
}
}
//加音量
function AddYin(){
if(video.volume<1){
video.volume+=0.1;
}
}
//减音量
function MinYin(){
if(video.volume>0){
video.volume-=0.1;
}
}
//设置静音
function JingYin(){
if(!video.muted){
video.muted=true;
document.getElementById("SetMuted").value="取消静音";
}else{
video.muted=false;
document.getElementById("SetMuted").value="静音";
}
}
</script>
</body>
</html>
以上是关于video视频播放的主要内容，如果未能解决你的问题，请参考以下文章
video.js 视频播放器是不是支持 youtube 视频？
在 react-native-video 中，视频播放完毕后如何重置视频播放器？