jQueryで動画が再生されてから、メインページが表示させるようにする方法

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
jQueryで動画が再生されてから、メインページが表示させるように組んでいます。
ですが、上手く再生されず（最初の1フレームは読み込まれるが、そこからから再生されない）にメインページが表示されてしまいます。
何方か教えていただけないでしょうか？

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの読み込み</title>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> 
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<script>
$(function(){
$(".mainSite").css("display", "none");
setTimeout(function() {
    $('.anime').fadeOut();
	}, 7000);
});

$(function(){
    $(".mainSite").css({opacity:'0'});
    setTimeout(function(){
    $(".mainSite").css("display", "block");
    $(".mainSite").stop().animate({opacity:'1'},1000);
    },7000);
});
</script>
<div class="anime">
<video>
    <source src="video/kasai_02.mp4" type="video/mp4">
    <source src="bg-movie.webm" type="video/webm">
</video>
</div>
<div class="mainSite">
  <h1>I'm love it.</h1>
</div>
</body>
</html>

###ここに言語名を入力

jQuery、HTML5

m.ts10806

2019/04/17 05:05

コードはマークダウンのcode機能を利用してご提示いただきたいのですが、「ここに言語名を入力」はそうではなくて下記です。 ```html コード ``` ```JavaScript コード ``` <code>ボタンを押したら「ここに言語名を入力」が選択状態になりませんでしたか？それは「ここを書き換えてね」という指定です。

mukawa

2019/04/17 05:39

ご指摘ありがとうございます。一応直してみました...

m.ts10806

2019/04/17 05:41

保存できてないみたいです。投稿前に編集画面右側のプレビュー確認してから保存し直してみてください

mukawa

2019/04/17 05:54

失礼しました・・・直しました。

namda

2019/04/17 05:57

うまく再生されないとは具体的にどのような状態ですか？プレイヤーが表示されないとか真っ黒い画面で変わらないとか再生されるけど終わる前にページが表示されるなど

mukawa

2019/04/17 06:00

ご指摘ありがとうございます。上記の通り、編集しました。

m.ts10806

2019/04/17 06:01

あれ？「ここに言語を」のところが伝わってなかった…ですかね。まあひとまずコードブロックにはなったのでOKです

mukawa

2019/04/17 06:06

こういったサイトを使用するのが、初めてで不慣れで申し訳ありません・・・

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

回答1件

ベストアンサー

質問内容を読み違ってたら失礼。

jQuery云々とか関係なく、単にページを開いたときにユーザーの操作なしに動画を再生させたい、
という話であれば <video> タグに autoplay 属性を付けてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes

投稿2019/04/17 06:50