< h1 > HTML5 Synchronize Video Test </ h1 > < video id = " v1 " controls src = " video_001.mp4 " style =" width : 256px " muted = " true " > </ video > < video id = " v2 " controls src = " video_001_copy.mp4 " style =" width : 256px " > </ video > </ div > </ body > </ html >

加入播放进度控制脚本( script ):

<script>
    // sync 2nd (right) video to playing position of 1st (left) video
    window.onload = function(){
        var v1 = document.getElementById('v1');
        v1.addEventListener("play", function() {
        document.getElementById('v2').play();
        });
        v1.addEventListener("pause", function() {
        document.getElementById('v2').pause();
        });
        v1.addEventListener("seeking", function() {
        document.getElementById('v2').currentTime = v1.currentTime;
        });
        v1.addEventListener("seeked", function() {
        document.getElementById('v2').currentTime = v1.currentTime;
        });
    </script>

参考资料:

[1] HTML5 Synchronize Video Test
[2] HTML 元素

实验本实验基于Chrome浏览器进行。先构建一个网页,内部包含2个视频。&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;HTML5 Synchronize Video Test&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;HTML5 Synchronize Video Test&lt;/h1&gt;&lt;div&gt; &lt;video id="v1" co
本文实例讲述了JavaScript实现同一页面内两个表单互相传值的方法。分享给大家供大家参考。具体如下: 有时候我们在提交表单的时候需要将两个表单的值互相传递,那么如何实现呢?其实很简单,就是用JavaScrip获取任一表单的值,然后赋给另一个,具体可看代码,代码很有意思,也很实用。 运行效果截图如下: 具体代码如下: <title>JavaScript同一页面两个表单互相传值</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script
前面我们在vue.js里继承了七牛云JSSDK, 完成了『上传文件』的基本。(我们选择了一张图片,瞬间上传到了七牛云上)。1、我们先准备html内容(我们用的是eleme-ui)<div> <el-progress :text-inside="true" :stroke-width="18" :percentage="0"> </el-progress> </div>2、vue.js