ysbcc.github.io/doublevideo.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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

<title>double</title>
<head>
<style>
body {height:100%}

</style>


</head>
<body>
	<div id="mod1">
	</div>
	<div id="msg" style=" height:100px; margin:20px; border:10px solid #888">
	</div>
</body>
<script src="/javascripts/three/jquery.js"></script>
<script src="//imgcache.gtimg.cn/tencentvideo_v1/tvp/js/tvp.player_v2_html5.js"></script>
<script src="//qzs.qq.com/tencentvideo_v1/js/txv.twist_video.min.js"></script>
<script>
	var $e = function(id){
       return document.getElementById.call(document, id);
    };

    var video1 = new tvp.VideoInfo(),
	video2 = new tvp.VideoInfo();
    video1.setVid('e0016q028dw');//给视频1指定vid
    video2.setVid('f0016url2rq');//给视频2指定vid

    var player = new Video2in1.Player();
    player.create({
        modId: 'mod1',
        width: 375,
        height: 210,
		autoplay : true,
        video: [video1, video2]
    });


	var msg = $e("msg");

	document.body.addEventListener("click", function(){
        var a = document.getElementsByTagName("video");
        $(".video2in1").show()
        a[0].style = "position: fixed;    display: block;    top: 200px;    left: 0;    width: 300px;    height: 250px;";
        a[0].setAttribute("controls","controls");
        a[1].style = "position: fixed;    display: block;    top: 400px;    left: 0;    width: 300px;    height: 250px;";
        a[1].setAttribute("controls","controls");
		player.reverse();
		msg.innerHTML += "reverse video; ";
	});
</script>
</html>