javascriptの質問です。
ローカルの動画を選択し、コマ送りさせるファイルを作りました。
IE11では期待通りの動きをしましたが、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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/26 13:05
2017/10/26 13:58