chromeでローカルから呼び出せません

javascriptの質問です。

ローカルの動画を選択し、コマ送りさせるファイルを作りました。
IE１１では期待通りの動きをしましたが、Chromeではファイル選択ができません。

なぜでしょうか？どのように直せばよいかご教示ください。
必要のない再生・一時停止は外してありますが、script記述には残っています。

使用ライブラリ：jquery-3.2.1.min

HTML
1コード
2
3<!DOCTYPE html>
4 <html>
5 <head>
6 <title>動画コマ送り</title>
7 <meta charset="UTF-8">
8 <style>
9 html {
10 height: 100%;
11 }
12
13 body {
14 height: 4000px;
15 }
16
17 video {
18 position: fixed;
19 left: 50%;
20 top: 0;
21 min-width: 100%;
22 min-height: 100%;
23 width: auto;
24 height: 80%;
25 z-index: -100;
26 background-size: cover;
27 transform: translateX(-50%);
28 }
29
30 h2 {
31 position: fixed;
32 top: 1%;
33 left: 50%;
34 width: 100%;
35 transform: translate(-50%, -50%);
36 z-index: 99;
37 font-family: HelveticaNeue, Helvetica, sans-serif;
38 font-size: 5vmin;
39 text-align: center;
40 color: white;
41 }
42 </style>
43 </head>
44 <body>
45 <h2>下スクロールでコマ送りされます</h2>
46 <div>
47 <input type="file" id="input">
48 </div>
49 <div>
50 <video id="video"></video>
51 </div>
52
53 <script src="./jquery-3.2.1.min.js"></script>
54 <script>
55 function scrollVideo() {
56 var video = $('#video').get(0),
57 videoLength = video.duration,
58 scrollPosition = $(document).scrollTop();
59
60 video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;
61 }
62
63 $(window).scroll(function (e) {
64 scrollVideo();
65 });
66 </script>
67
68 <script>
69 (function(win, doc){
70
71 var URL = win.URL || win.webkitURL,
72 input = doc.querySelector('#input'),
73 video = doc.querySelector('#video'),
74 btnPlay = doc.querySelector('#btnPlay'),
75 btnPause = doc.querySelector('#btnPause');
76
77 input.onchange = function(){ 
78 if(this.files && this.files.length){
79 tryVideo( this.files[0] );
80 }
81 };
82
83 btnPlay.onclick = playVideo;
84 btnPause.onclick = pauseVideo;
85
86 function tryVideo(file){
87
88 if( !/video/.test(file.type) ){
89 return alert('これはビデオではありません');
90 }
91
92if( !/probably|maybe/.test( video.canPlayType(file.type) ) ){
93 return alert('再生できる動画ファイルではありません');
94 }
95
96video.src = URL.createObjectURL(file);
97
98 }
99
100 function playVideo(){
101 video.play();
102 }
103
104 function pauseVideo(){
105 video.pause();
106 }
107
108 })(window, document);
109 </script>
110 </body>
111 </html>

行動規範の内容に同意します

回答1件

ベストアンサー

ファイル選択ができないのは、<h2>下スクロールでコマ送りされます</h2>こいつのせいだと思います。

今こいつに対してかかっているCSSは

h2 {
 position: fixed;
 top: 1%;
 left: 50%;
 width: 100%;
 transform: translate(-50%, -50%);
 z-index: 99;
 font-family: HelveticaNeue, Helvetica, sans-serif;
 font-size: 5vmin;
 text-align: center;
 color: white;
}

こいつらです。
ここでchromeの要素の検証を使ってどのようにオブジェクトが配置されているか見てみましょう。（文字が見にくかったので黒にしました）

見てもらったらわかりますが、h2要素がまんまファイルの選択ボックスにかぶっています。こうなっているとファイル選択をクリックしたつもりでもこのh2要素がクリックされている判定になるので一向にファイルが選択できません????

質問者さんがhtml,cssにどれくらい慣れているのかわからないですし、どのようなデザインにするかはわからないので原因だけ説明すると（わかる場合はああそうだったで飛ばしてください）
positionがfixedになっているので、画面上の絶対位置で指定されるので、他の要素の上にも重なります。実際、top: 1%なのでこの場合、このh2要素は画面の上から1%の所に配置され、z-index:99に設定されているので、めちゃくちゃ上にきます。
なので、クリックできない状態になってしまったわけです。

この場合、いくらでも対策はあるのですが、topを増やす、inputとh2とvideoタグでうまくz-indexを設定するなどですかね。
どうでしょうか？

投稿2017/10/26 10:01