html5のvideoを利用したコマ送りがうまく動きません。

参考にさせていただいているサイト
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秒単位程度にコマを分けたいと思っているのですが。

よろしくお願いします。

kei344

2017/10/08 11:00

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

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

回答2件

ベストアンサー

1つ目についてはJQueryが必要なためです。

2つ目については計算を縦の長さでやっているようなので、
2秒を0.5秒にしたいのであれば
bodyの高さを4倍してあげればよいかと。
4000px→16000px

投稿2017/10/07 07:37

kentei_syunrai

総合スコア946

kihokutarou

2017/10/11 08:15

なるほど、納得です！ありがとうございました！

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

1つ目についてのみ回答します。

まず上記サイト様をお手本にファイルを構成しましたが動きません。動画が読めていないようです。

jQueryを読み込んでいないからではないでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <title>動画コマ送り</title>
5    <meta charset="UTF-8">
6    <style>
7        html {
8            height: 100%;
9        }
10
11        body {
12            height: 4000px;
13        }
14
15        video {
16            position: fixed;
17            left: 50%;
18            top: 0;
19            min-width: 100%;
20            min-height: 100%;
21            width: auto;
22            height: auto;
23            z-index: -100;
24            background-size: cover;
25            transform: translateX(-50%);
26        }
27
28        h1 {
29            position: fixed;
30            top: 50%;
31            left: 50%;
32            width: 100%;
33            transform: translate(-50%, -50%);
34            z-index: 99;
35            font-family: HelveticaNeue, Helvetica, sans-serif;
36            font-size: 8vmin;
37            text-align: center;
38            color: white;
39        }
40    </style>
41</head>
42<body>
43<h1>scroll to play video</h1>
44<video id="video" src="./oceans.mp4"></video>
45
46<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
47<script>
48    function scrollVideo() {
49        var video = $('#video').get(0),
50            videoLength = video.duration,
51            scrollPosition = $(document).scrollTop();
52
53        video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;
54    }
55
56    $(window).scroll(function (e) {
57        scrollVideo();
58    });
59</script>
60</body>
61</html>