めも。Macです。

brewでffmpegをインストール

依存パッケージエンコーダーいろいろと入ります。

$ brew install ffmpeg

できたらffmpegコマンドで抜く(正確には映像コーデックのみをコピー)

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

いろいろmp4コンテナいじれて面白そう。

Youtube 埋め込み iFrame APIでスマホで動画を自動再生する方法。(一部はできない

基本音声が入っているとできない、古い機種はできない、最近はわりとできるようになってきている。
微妙に悩ましい状況、動画GIFや独自mp4やボタンを置いて再生とかいろいろ検討する。
（本質的なところを掘り下げたい、、昔のIE5とか6とかwindows2000とか思い出す不毛)

ES6の抜粋
ポイントは、onReady で再生準備できたところで、いったん、
this.player.mute();
とミュートしてから再生しているとこ。(音声はYoutubeにかかわらずスマホは全般自動はだめ)

class Hoge { 
    player;
    isPlay=false;
    
    constructor() {
        window.onYouTubeIframeAPIReady = $.proxy(this.loadYoutubeApi,this);
        let scriptEl = document.createElement('script');
        let headEl = document.querySelector('head');
        scriptEl.src = "https://www.youtube.com/iframe_api";
        headEl.appendChild(scriptEl);
    }
        
    loadYoutubeApi(){
        this.player = new YT.Player('bgndVideo', {
            videoId: 'YOUR_LIKE_VIDEO_ID',
            width: '1920',
            height: '1024',
            playerVars: {
                playsinline: 1,
                showControls: 1,
                modestbranding:1,
                showinfo:0,
                controls:0,
                rel:0
            },
            events: {
                'onReady': $.proxy(this.onReadyYoutube,this)
            }
        });
    }

    onReadyYoutube(e){
        this.player = e.target;
        this.player.mute();
        this.playVideo();
        $('#bgndVideo').addClass('ready');
    }

    playVideo(){
        this.player.seekTo(1);
        this.player.playVideo();
        this.isPlay = true;
        setTimeout($.proxy(this.playVideo),19*1000);
    }

全体はこんな感じ、これは実は短い動画をループ再生していて、
最後まで再生するとチラッっと黒くなってピカピカちらつくので、最後に到達する前にループしています。(背景のまぁいめーじなので、大丈夫)

css3,transform: translate3dでのちらつきと、重なり順のバグ表示

アニメーションをつくっていたら、最後の方でちょこっとチラついたり、zIndexがおかしくなってみえなくなったりすることが有りました。

結果からいうと、以下で解決。

@keyframes animename
from
transform: translate3d(0,20%,0)
to
transform : none;　× これを、→ translate3d(0,0,0) に修正


具体的ところでは、要素の書く順番で、普通はBが上に来る。

animeA,animeB{
    position: absolute;
}
~~
<div id="animeA"></div>
<div id="animeB"></div>

けどアニメーションの途中などで以下のスタイルの状態になると、瞬間的にAが上に重なる。

animeA{
    transform: translate3d(0, 0,0);
}
animeB{
    transform: none;
}
~~

これは、translate3dを使った場合に CPUでなくGPUレンダリングが利用され、その描画レイヤーが通常のCPUレンダリングの上に来てしまうらしい。

高速化と確実性の両立がベストだけど高パフォーマンスをだすためにいろいろ頑張っているそのすきまなのかもしれなない。

gulpタスクランナー、babel(ES6)で、クラスプロパティーを使う。

ES6の私用でクラスプロパティーがつかえない、TyepScript,Coffeとかは使える。
Class properties transformプラグインをインストールする。

$ npm install --save-dev babel-plugin-transform-class-properties

Class properties transform
https://babeljs.io/docs/plugins/transform-class-properties/

gulpfile.jsでbabelするときにオプションで渡す。

gulp.task('babel', function() {
  browserify({
    entries: ['src/js/app.js']
  })
    .transform(babelify, {
      presets: ["es2015"],
      plugins: ["transform-class-properties"] // ★ココ , presetsとおなじく渡せばいいだけ
    })
    .bundle()
    .on("error", function (err) {
      console.log("Error : " + err.message);
      this.emit("end");
    })
    .pipe(source('app.js'))
    .pipe(gulp.dest('app/js/'));
});

フルスクリーンで縦にコンテンツごとスライドするJavaScriptを比較しようと思ったけど、fullPage.jsで良さそうなので比較しなかった。

タイトルの通り比較しようとしてfullPage.jsからみた。

fullPage.js

https://alvarotrigo.com/fullPage/

DocumentやDemoや有料のExtensionを見ていくと。

• タブレット可能
• 横も有り。
• 縦のドットあり
• スクロールバー付可能

• なし

• 横スクロールのドットあり
• セクション内でスクロール可能(これ良いかも
• faceエフェクトもある。

ほとんどなんでもできそうで比較せずにこちら採用で.orz.