OMG 在线思维导图都发生开源之

图片 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
</head>
<body>
    <script type="text/javascript">
        function timeUpdate() {
            document.getElementById('time').innerHTML = video.currentTime;
        }
        function durationChange() {
            document.getElementById('duration').innerHTML = video.duration;
        }
        function seekVideo() {
            document.getElementById('video').currentTime = document.getElementById('seekText').value;
        }
        window.onload = function () {
            var videoPlayer = document.getElementById("video");
            videoPlayer.ontimeupdate = function () { timeUpdate(); };
        };
    </script>
    <div>
        <video id="video" controls="controls"
            poster=".videoground1.png"
            src="./videoSource/video1.mp4" width="450px" height="320px"
            ondurationchange="durationChange()" />
    </div>
    <div>Time: 0 of 0 seconds.</div>
    <div>
        <input type="text" id="seekText" />
        <input type="button" id="seekBtn" value="Seek Video" onclick="seekVideo();" />
    </div>
</body>
</html>

 

video.ontimeupdate = function () { getCurrentVideoPosition(); };

https://github.com/ondras/my-mind

  当然你也可像在页面上运其他元素一样,给Video对象动态添加属性或者挂事件,如:

my-mind在线思维导图

http://msdn.microsoft.com/en-us/library/windows/apps/hh465962.aspx

如若给哪家云××公司整合进了,应该是一个没错的优点。

  Video对象足以经ontimeupdate事件来告诉时底播音进度,同时通过该事件还好因视频播放的情景来支配页面及之另外元素,例如随着视频播放的快来切换章节、显示额外信息等。下面是一个例子:

 

  不过者这行代码貌似在Chrome上无效,可以动用addEventListener来代表它:

http://my-mind.github.io/

  日前以做一个视频播放的页面,其中使用了HTML5的Video对象,这个是HTML5蒙受新增的一个靶,支持多种不同格式的视频在线播放,功能于强,而且还扩大了无数轩然大波,可以由此JavaScript脚本来对视频播放进行控制。参考下面两独链接:

 

http://www.w3school.com.cn/html5/tag_video.asp

 

  不明了是啊由在Chrome上未可知直接以ontimeupdate事件挂在Video元素上,而得透过addEventListener道来补充加波。不过addEventListener为兼容IE和Firefox浏览器,所以理应是由此的。

示范地址:

videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);

 

源代码:

试跳了瞬间,操作及还出把bug,但中心可用了。