参考にさせていただいているサイト
https://codepen.io/juanbrujo/pen/KJdst
質問は2つあります。
まず上記サイト様をお手本にファイルを構成しましたが動きません。動画が読めていないようです。
html
1<!DOCTYPE html> 2<head> 3 <title>動画コマ送り</title> 4 <meta charset="UTF-8"> 5 6</head> 7<style> 8html { 9 height:100%; 10} 11body { 12 height: 4000px; 13} 14video { 15 position: fixed; 16 left: 50%; 17 top: 0; 18 min-width: 100%; 19 min-height: 100%; 20 width: auto; 21 height: auto; 22 z-index: -100; 23 background-size: cover; 24 transform: translateX(-50%); 25} 26h1 { 27 position: fixed; 28 top: 50%; 29 left: 50%; 30 width: 100%; 31 transform: translate(-50%,-50%); 32 z-index: 99; 33 font-family: HelveticaNeue, Helvetica, sans-serif; 34 font-size:8vmin; 35 text-align:center; 36 color: white; 37} 38</style> 39<script src="./main.js"></script> 40 41<body> 42<h1>scroll to play video</h1> 43<video id="video" src="./oceans.mp4"></video> 44 45 46</body> 47</html> 48
main.js
1function scrollVideo() { 2 var video = $('#video').get(0), 3 videoLength = video.duration, 4 scrollPosition = $(document).scrollTop(); 5 6 video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength; 7} 8 9$(window).scroll(function(e) { 10 scrollVideo(); 11});
ローカルの動画を読み込んでコマ送りをしたいと思っています。
もしかしてほかのライブラリも必要なのかと思っていますが・・・解説サイトなどもなくよくわかりません。
2つ目の質問です。
参考サイトを見ると2秒程度ごとにコマを切っているようですが、これは設定できそうな感じですか?0.5秒単位程度にコマを分けたいと思っているのですが。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー