オープニング動画を終了させてサイトを表示

前提・実現したいこと

HPでオープニングで動画を自動再生、終了後フェードしてサイトを表示させる
途中画面をクリックすると動画を終了させたい

発生している問題・エラーメッセージ

windowsはクローム・エッジ・ie 共動画終了後フェードして消えますが、サファリは崩壊
macのサファリ・クロームは動画は動くが終了しても消えません。クリックでは終了する。
効いていないscriptのブラウザでは関係するcssも効いていません。

該当のソースコード


<div class="anime" onClick="myfunc()">
<div class="skip">skip</div>
<video id="video" autoplay muted playsinline height="100%" width="100%">
<source src="test.mp4" type="video/mp4">
<source src="test.webm"  type="video/webm">
</video>
</div>

<div class="mainSite">
コンテンツ
</div>



<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script> 
<script>
$(function(){
$(".mainSite").css("display", "none");
setTimeout(function() {
    $('.anime').fadeOut();
    }, 4000);
});
</script>
<script>
$(function(){
    $(".mainSite").css({opacity:'0'});
    setTimeout(function(){
    $(".mainSite").css("display", "block");
    $(".mainSite").stop().animate({opacity:'1'},4000);
    },4000);
});
</script>
<script>
var myfunc = function () {
		$(".mainSite").css("display", "block");
		$(".mainSite").stop().animate({opacity:'1'},4000);
		$('.anime').fadeOut();
    }
</script>

試したこと

最初は動画が動かなかったので　muted　を入れると自動再生するようになりました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

miyabi_pudding

2019/03/07 09:05

動画再生後に起動するようなロジックが無いようですが、 4000msのsetTimeoutで実行している（動画が4秒）ということでよろしいですか？

d1-fujii

2019/03/07 09:08

はい動画は4秒です。宜しくお願い致します。

miyabi_pudding

2019/03/07 09:23

当方のローカル環境では、全ブラウザにて、おそらく質問者さんが期待する動きが実現できました。ただし、webmではなく、ogvを使用してです。 webmに関しては、かなり新しい形式なので、もしどうしてもうまくいかない場合は、ogvに切り替えて解決するかもしれません。ちなみに、windows版safariは開発とサポートが終了して久しいので対応は必要ないかと思われます。

d1-fujii

2019/03/07 09:45

早速のご回答ありがとうございます。 ogvに変換した物を上げて見ました動画は動きますがfadeout出来ませんでした。私もmacのローカル検証ではクロームもサファリも問題ないくフェードアウトするのですが、サイト（Xserver）にテストでアップすると上手くcloseできません。scriptはよくわからないのですが、クリックは生きているけど、setTimeoutはブラウザによっては効いていない感じです。setTimeoutの効いていない物はcssも効いていないので非表示のはずのmainSiteも見えてしまっています。

miyabi_pudding

2019/03/07 10:39

私も実は、自前のサイトで、macのsafariでは、（iOSも含め）動画が再生されないという現象が起きています。質問者さんと同様に、scriptによって、表示などをコントロールしています。他の環境では全く問題ありません。ローカルでは大丈夫で、サーバーによって、SafariやChromeが制限をかけているとか、そんな現象かもしれません。この件、検証重ねていきますので、今しばらくお待ちください。

d1-fujii

2019/03/07 11:14

ありがとうございます、宜しくお願い致します。ローカルでは良い感じになったと思っていたので、サーバーに上げてアタフタしています。実は納期が明日のお昼で、実際の動画の上がりも明日の朝で、動画の音は出したいと言うことになってきて、音を出すと自動再生が止まってしまうので頭を抱えています。コントロールを表示して音だししてもautoplayが出来れば良いのですが、最初の読み込みが自動で動かず、トップをクリックして再読み込みすると動きます。時間がないので私もフリーズしています。