wechatVideoExample/videotest.html at master · fomenyesu/wechatVideoExample · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!-- <html>
<head> -->
<!--     <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${content.contentExt.description!}</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
    <style>
/*html,body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

.videobox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

video {width: 1px;display: block;}*/
    </style>
<!-- </head>
  <body> -->
    <!-- <div class="trends-img-box"> -->
      <!-- <div class="trends-img-border"> -->

        <!-- <video  src="http://img4.xingxio.com/zxmanager/misc/uploadfile//2016093017040424039.mp4" style="background: url(\'/r/cms/www/mobile/img/peitu/5.png\');background-size: cover;width: 100%;height: 100%" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" controls="controls" autoplay="autoplay" webkit-playsinline></video> -->


      <!-- </div> -->
    <!-- </div> -->
<!--     <div class="videobox" onClick="playVideo();">
        <video id="mainvideo" webkit-playsinline="true" src="http://img4.xingxio.com/zxmanager/misc/uploadfile//2016093017040424039.mp4"></video>
    </div> -->
    <script>
  // var video = document.querySelector('#mainvideo');
  // var videobox = document.querySelector('.videobox');


  // //播放时改变外层包裹的宽度，使video宽度增加，
  // //相应高度也增加了,播放器控件被挤下去，配合overflow：hidden
  // //控件看不见也触摸不到了
  // var setVideoStyle = function (){
  //   videobox.style.width = '120%';
  //   videobox.style.left = '-10%';
  //   video.style.width = '100%';
  // }

  // var playVideo = function (){
  //   video.play();
  //   setVideoStyle();
  // }
    </script>
<!--   </body>

</html> -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
    .video-container{width:100%;height:100%;position:absolute;left:0%;top:0%;z-index:99;display:none}
.video-container video{position:absolute;top:0;left:0;display:none}.video-container canvas{position:absolute;top:0;left:0;display:none;-webkit-transform-origin:top left}
    </style>

</head>
<body>

<div class="video-container">
  <video id="myVideo" webkit-playsinline="true" preload="auto" width="auto" height="320"><source src="http://cdn.szxgl.cn/haochezhu77/media/v2.mp4" type="video/mp4"> </video>

  <!-- <video  width="640" height="360" id="myVideo" controls>
      <source src="http://img4.xingxio.com/zxmanager/misc/uploadfile//2016093017040424039.mp4" ></source>
  </video> -->
  <canvas id="videoCanvas" width="100" height="100"></canvas>
</div>
<button onclick="play()" style="position: absolute; bottom: 0; height: 100px; width: 50%;z-index: 999;">play</button>

<!-- <video width="640" height="360" controls>
    <source src="http://img4.xingxio.com/zxmanager/misc/uploadfile//2016093017040424039.mp4" ></source>
</video> -->

<script src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- <script src="util.js" type="text/javascript"></script> -->
<script src="canvas-video-player.js" type="text/javascript"></script>
<script type="text/javascript" >
var PageData={gender:null,opt1:null,opt2:null,house:null},ScreenSize={width:640,height:1050},MovieSize={width:100,height:100},FrameSize={width:100,height:100},activeFrame={width:0,height:0},videoDisplay=0,playWidth=0,playHeight=0,cdStep=0,cdStep2=0,canvasVideo1=null;

var videoWidth = parseInt($("body").width());
var videoHeight = parseInt($("body").height());
activeFrame={width:videoWidth,height:videoHeight};
playWidth=activeFrame.height/MovieSize.height*MovieSize.width;
playHeight=activeFrame.width/MovieSize.width*MovieSize.height;
  console.log(playWidth);
  console.log(playHeight);
  console.log(activeFrame);
    var canvasVideo1=new CanvasVideoPlayer({
      videoSelector:"#myVideo",
      canvasSelector:"#videoCanvas",
      hideVideo:!0,
      audio:!0
    });
    function play() {
      canvasVideo1.play()
      // var video = $("#myVideo").get(0).play();
    }
    function stop() {
      var video = $("#myVideo").get(0).pause();
    }
    $(document).ready(function () {
       $(".video-container").show().find("#videoCanvas").show();
    });
</script>
</body>
</html>