我如何向html5视频添加控件？（如何在后台html中制作命令视频）_Html_Video_Background

我如何向html5视频添加控件？（如何在后台html中制作命令视频）

html video

我如何向html5视频添加控件？（如何在后台html中制作命令视频）,html,video,background,Html,Video,Background,下面是我使用html5视频标签在后台播放视频的代码： <video autoplay poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="det/img/bgv.mp4" type="video/mp4"> </video> 但是如何添加控件呢？（播放视频、暂停、停止）您可以使用javascript实现这一点基本示

下面是我使用html5视频标签在后台播放视频的代码：

<video autoplay poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="det/img/bgv.mp4" type="video/mp4">
</video>

但是如何添加控件呢？（播放视频、暂停、停止）

您可以使用javascript实现这一点

基本示例来自：


函数vidplay（）{
var video=document.getElementById（“Video1”）；
var按钮=document.getElementById（“播放”）；
如果（视频暂停）{
video.play（）；
button.textContent=“| |”；
}否则{
video.pause（）；
button.textContent=“>”；
}
}
函数重新启动（）{
var video=document.getElementById（“Video1”）；
video.currentTime=0；
}
函数跳过（值）{
var video=document.getElementById（“Video1”）；
video.currentTime+=值；
}      
//用您自己的视频文件替换这些文件。
本例需要HTML5视频。
文件
[]

您可以将属性“controls”添加到标记中

…

您可以使用javascript连接到视频对象。将其与按钮单击或对应用程序有意义的任何其他类型的事件联系起来

var v=document.getElementsByTagName（“视频”）[0]
v.play（）
如果适用的话，考虑使用JavaScript库来设计使用视频标签更容易。
更多研究：


<script type="text/javascript">

function vidplay() {
   var video = document.getElementById("Video1");
   var button = document.getElementById("play");
   if (video.paused) {
      video.play();
      button.textContent = "||";
   } else {
      video.pause();
      button.textContent = ">";
   }
}

function restart() {
    var video = document.getElementById("Video1");
    video.currentTime = 0;
}

function skip(value) {
    var video = document.getElementById("Video1");
    video.currentTime += value;
}      
</script>

</head>
<body>        

<video id="Video1" >
//  Replace these with your own video files. 
     <source src="demo.mp4" type="video/mp4" />
     <source src="demo.ogv" type="video/ogg" />
     HTML5 Video is required for this example. 
     <a href="demo.mp4">Download the video</a> file. 
</video>

<div id="buttonbar">
    <button id="restart" onclick="restart();">[]</button> 
    <button id="rew" onclick="skip(-10)">&lt;&lt;</button>
    <button id="play" onclick="vidplay()">&gt;</button>
    <button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>