ysbcc.github.io/2videos.html at master · ysbcc/ysbcc.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">


<title>2 videos</title>
<head>
<style>
body {height:100%}
vcon {width: 375px}
</style>
</head>
<body>
	<div class="vcon">
    <video id="v1" height="150" x-webkit-airplay="true" webkit-playsinline playsinline autoplay="true" preload="none" controls="controls" ></video>
    </div>
    <div class="vcon">
    <video id="v2"  height="150" x-webkit-airplay="true" webkit-playsinline playsinline autoplay="true" preload="auto" controls="controls"></video>
	</div>
	<div id="sw" style="position: fixed;width: 80px;height: 20px;right: 0px; bottom:10px; border: 10px solid #888;text-align: center;padding: 8px; z-index: 9; cursor: pointer; color: black; font-size: 20px;">
    SWITCH
	</div>
    <div id="ctrl" style="position: fixed;width: 70px;height: 20px;right: 120px; bottom:10px; border: 10px solid #888;text-align: center;padding: 8px; z-index: 9; cursor: pointer; color: black; font-size: 20px;">
        PLAY
    </div>
    <div id="bot" style="position: fixed;height: 200px; bottom: 0px; color:red;pointer-events: none;"></div>
    <script>

    	var $e = function(id){
           return document.getElementById.call(document, id);
        };

        var bot = $e("bot");
        function log(txt){
            bot.innerHTML = txt + "<br/>" + bot.innerHTML;
        }

    	var src1 = "/images/360.mp4";
        var src2 = "/images/af1080.mp4";
        var bksrc = "/images/beach.mp4";
    	var ctrl = $e("ctrl");
        var v1 = $e("v1");
        var v2 = $e("v2");
        v1.src = src2;
        v2.src = src2;
        var firstPlay = true;
        var isSwitching = false;
        var currentTime = -1;

        v1.addEventListener("timeupdate", function(){
            if (v1.currentTime > currentTime){
                //it never go back
                currentTime = v1.currentTime;
            }
            else{
                //v1.currentTime = currentTime + 0.2;
            }
        });

        v2.addEventListener("playing", function(){
            if (firstPlay){
                log("v2 firstPlay, stop");
                v2.pause();
                v2.src = "";
                firstPlay = false;
            }
            else{
                log("v2 playing and seeking");
                //v2.currentTime = currentTime;
            }
        });
    	//loadedmetadata, loadeddata, canplay, play, playing

        v2.addEventListener("loadedmetadata", function(){
            if (isSwitching){
                isSwitching = false;
                log("v2 loadedmetadata and seeking");
                v2.currentTime = currentTime + 0.3;
            }
        });

        $e("sw").addEventListener("click", function(){
            v2.src = src2;
            isSwitching = true;
            log("v2.src = src2");
        });

        //必须有用户点击行为才能触发视频播放
    	ctrl.addEventListener("click", function(){
            //这里两个视频会同时loading
            v2.play();
            v1.play();
    		log("v1 v2 play");
    	});
    </script>
</body>
</html>