VIDEOタグを設置したが、デベロッパーツールを開いている時しか動画が再生しない。

Question

以下のvideoタグを設置しています。
しかし、デベロッパーツールを開いている時のみにしか動画が再生されず、1フレーム目で止まってしまいます。

<div class = "first_view section">
    <video class="movie" src="img/top.mp4" autoplay></video>
</div>
}
原因に心当たりがある方は是非ご教授ください。


関連するそのほかの記述ですが
```css{
.first_view{
  width:100vw;
  position:fixed;
  z-index:-1;
}

.movie{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}

.movieLayer{
transition:.3s;
filter: brightness(30%);
}
}

```js{

$(function(){
    var margin = 300,
    sectionTop = new Array,
    current = -1;

    $('.section').each(function(i) {
        sectionTop[i] = $(this).offset().top;
    });

    changeNavCurrent(0);
    $(window).scroll(function(){
        scrollY = $(window).scrollTop();

        for (var i = sectionTop.length - 1 ; i >= 0; i--) {
            if (scrollY > sectionTop[i] - margin) {
                    changeNavCurrent(i);
                break;
            }
        };
    });　
    function changeNavCurrent(curNum) {
        if (curNum != current) {
            current = curNum;
            curNum2 = curNum + 1;
            $('#gNavi li').removeClass('active');
            $('#gNavi li:nth-child(' + curNum2 +')').addClass('active');
        }
    };
});

$(function(){

var s = $('.movie');
$(window).scroll(function () {
if ( $(this).scrollTop() > 1 ) {
s.addClass('movieLayer');
} else {
s.removeClass('movieLayer');
}
});
});



}

Answer 1

ブラウザの仕様変更に伴い、autoplayはmutedと併用しないと再生されない仕様になっていたようでした。mts10806様、真摯にご対応くださりありがとうございました。

Answer 2

空白除去してもダメですか？

class = "movie"
↓
class="movie"

念のためcssも提示していただければと。
あと動画のサイズとかブラウザとかはどうですか？

Comments

[MemoT]

早速のご回答ありがとうございます。

空白をのぞいてみましたが、ダメでした。
動画サイズは、22.7MB
現在検証しているブラウザはChromeです。

関連している記述は
```css
{
.movie{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}

.movieLayer{
transition:.3s;
filter: brightness(30%);
}
}

```js{

$(function(){

var s = $('.movie');
$(window).scroll(function () {
if ( $(this).scrollTop() > 1 ) {
s.addClass('movieLayer');
} else {
s.removeClass('movieLayer');
}
});

});

}

[m.ts10806]

コメント欄では他の見ている人の目につかないので下記のように質問本文にコードブロック```で囲った上で追記してください。
```css
{CSS内容}
```
```js
{JavaScript内容}
```

[m.ts10806]

もしかして、開発ツールを閉じてブラウザ幅狭めたら再生始まったりしません？

[MemoT]

試してみましたが、幅を狭めても状況は変わりませんでした。
ご親切にありがとうございます。不慣れですが、他に必要な情報ありましたら追加で補足いたしますのでよろしくお願いします。

[m.ts10806]

ひとまず、18:49にコメント更新したようにコードを質問本文にうつしてください。

[MemoT]

承知しました

[MemoT]

別の動画を差し込んでみて発覚したのですが、動画が再生されていないのでくはなく、一フレーム目で止まってしまっているようです。

[MemoT]

ブラウザの仕様変更に伴い、autoplayはmutedと併用しないと再生されない仕様になっていたようでした。mts10806様、真摯にご対応くださりありがとうございました。