【riot.js】DOMは追加できているんですが動画が表示されません

form
1<form-video>
2    <div id="form-video">
3        <label for="video">動画を選択</label>
4        <div class="video-wrapper" show={ preview }>
5            <video preload="auto">
6                <source src="{ previewSrc }" type="video/mp4">
7            </video>
8        </div>
9        <input id="video" type="file" accept="video/*" onchange="{ changed }"></input>
10    </div>
11    <style>
12        #form-video {
13            position: relative;
14            margin-top: 30px;
15            width: 100%;
16            height: 225px;
17            overflow: hidden;
18            border-bottom: 2px solid #93CFF4;
19        }
20
21            label {
22                display: block;
23                color: #58656F;
24                width: 100%;
25                font-weight: bold;
26                line-height: 225px;
27                text-align: center;
28            }
29
30            .video-wrapper {
31                position: absolute;
32                top: 0;
33                left: 0;
34                z-index: 90;
35                width: 100%;
36                height: 225px;
37                vertical-align: bottom;
38            }
39
40            video {
41                width: 100%;
42                height: 225px;
43            }
44
45            #video {
46                display: none;
47            }
48    </style>
49    <script>
50        var fileBool = false
51        var target = this
52        this.changed = function(e) {
53            var fileData = e.target.files[0]
54            var fileType = fileData.type
55            var reader = new FileReader()
56
57            if ('' !== e.value) {
58            // ファイルが選択されている場合
59
60                reader.onerror = () => {
61                // ファイル読み込み失敗時
62                    alert('ファイル読み取りに失敗しました')
63                }
64
65                reader.onload = function() {
66                // ファイル読み込み完了時
67                    target.preview = true;
68                    target.previewSrc = reader.result;
69                    target.update()
70                }
71            }
72
73            // 動画読み込み実行
74            reader.readAsDataURL(fileData)
75        }
76    </script>
77</form-video>

t_obara

2017/01/26 05:18

確認しているブラウザや、動作環境（スマホ？PC？等）を提示してください。

NobumitsuHata

2017/01/26 05:26

Macでchrome使ってます

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

回答1件

ベストアンサー

FileReaderでわざわざ文字列(base64)にしなくともURL.createObjectURL()でバイナリーのままで設定できます。

html
1<form-video>
2    <div id="form-video">
3        <label for="video">åç»ãé¸æ</label>
4        <div class="video-wrapper" show={ preview }>
5            <video preload="auto" src="{ previewSrc }" autoplay></video>
6        </div>
7        <input id="video" type="file" accept="video/*" onchange="{ changed }"></input>
8    </div>
9    <style>
10        #form-video {
11            position: relative;
12            margin-top: 30px;
13            width: 100%;
14            height: 225px;
15            overflow: hidden;
16            border-bottom: 2px solid #93CFF4;
17        }
18        
19        label {
20            display: block;
21            color: #58656F;
22            width: 100%;
23            font-weight: bold;
24            line-height: 225px;
25            text-align: center;
26        }
27        
28        .video-wrapper {
29            position: absolute;
30            top: 0;
31            left: 0;
32            z-index: 90;
33            width: 100%;
34            height: 225px;
35            vertical-align: bottom;
36        }
37        
38        video {
39            width: 100%;
40            height: 225px;
41        }
42        
43        #video {
44            display: none;
45        }
46    </style>
47    <script>
48        var target = this;
49        this.changed = (e) => {
50            target.preview = true;
51            target.previewSrc = URL.createObjectURL(e.target.files[0])
52            target.update()
53        }
54    </script>
55</form-video>