H5は、独自のビデオプレーヤーを作成します（JSパート2）

レビュー

まあ見直さないbvd.jsを書面で直接ハァッ、オープンJS1を

ビデオ再生

再生ボタンは非表示します

ビデオの再生が開始
、再生ボタンが非表示になり、再生ボタンをクリックして動画を再生するとき、これはJS1に我々は達成している、難しいことではありません。再生ボタンが隠れてそうこと、しかし、我々は思考の変化が、タップは、クリックイベントのビデオ、ビデオプレーヤーを追加し、その後、イベントがトリガされ遊びます

pro.initEvent = function(){
    var that = this;

    //给播放按钮图片添加事件
    this.vimg.addEventListener('tap',function(){
        that.video.play();
    })

    //视频点击暂停或播放事件
    this.video.addEventListener('tap',function(){
        if(this.paused || this.ended) {
            //暂停时点击就播放
            if(this.ended) {//如果播放完毕，就重头开始播放
                this.currentTime = 0;
            }
            this.play();
        } else {
            //播放时点击就暂停
            this.pause();
        }
    })
    
    //视频播放事件
    this.video.addEventListener('play',function(){
        that.vimg.style.display = 'none';
    })
    
    
    //获取到元数据
    this.video.addEventListener('loadedmetadata',function(){
        that.vC.querySelector('.duration').innerHTML = stom(this.duration);
    });
}

コントロールバーの下に隠れて、徐々に
隠しは困難ではない、ので、ここで我々はいくつかのソリューションを持って、徐々に隠さすることが重要です。
1. タイマー
2. CSS3アニメーションフレーム

ここでは、組み合わせて2種類があります

まず、のは、アニメーションの良いセットを定義してみましょう

@keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}

@-webkit-keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}

.vhidden {
    animation: vhide 3.5s ease-in;
    -webkit-animation: vhide 3.5s ease-in;
}

その役割は、使いやすさで効果が過度に速い遅いから3.5秒である、透明度1 => 0です。CSSのアニメーションは、あなたがあああなたのお母さんにお願いすることができます理解していない
とのイベント時に、我々は、ビデオの再生を開始するコントロールバーが vhiddenスタイルクラスを追加しました

//视频播放事件
this.video.addEventListener('play',function(){
    that.vC.classList.add('vhidden');
})

テスト結果、及び3.5S内に確かに、コントロールバー、ゆっくりと明確な、問題は、3.5S後1への透明性の裏で、ここで私は、デフォルトでは、アニメーションのフレームがリバウンドであるので、我々は、スタイルを追加することができ、説明します

.vhidden {
    animation: vhide 3.5s ease-in;
    -webkit-animation: vhide 3.5s ease-in;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
}

CSS3アニメーション・フィル・モード属性は、アニメーションの後のような要素を定義するために使用されます。

アニメーション・フィル・モードのデフォルト値は、アニメーション・フィル・モードの終了後に転送したアニメーションスタイル要素に指定された最後のキーフレームアニメーションになります場合は、アニメーションの終了後に変更することなく、あるなし、ではありませんスタイル。

3.5S後にこのスタイル、そして案の定を追加した後、アニメーションはリバウンドしませんが、ここを見て、しかし、透明コントロールバーが消えていない、と私たちは書くことがあればそのように制御して、時間のコントロールバーをクリックしてくださいバーの位置をクリックするか、イベントをトリガしますので、我々は3.5S後に非表示にするには、コントロールバーを許可するのsetTimeoutのために書くことができ、これは、我々は自分自身を選択することができます

//视频播放事件
this.video.addEventListener('play',function(){
    that.vimg.style.display = 'none';
    that.vC.classList.add('vhidden');
    that.vCt = setTimeout(function(){
        that.vC.style.visibility = 'hidden';
    },3400);
})

なぜアニメーション処理は3.5Sであるが、実装は、ライトアニメーションフィルモードにちょうどここで、3.4s後JSはない：転送した場合は、被保険者のことを

で遊びます

ねえ、あなたがビデオを再生することができます！だから今、私たちは何をすべきか、物事の再生について考えますか？

1.コントロールバーのプログレスバーがゆっくりと成長します

私たちは、ビデオを追加する必要がtimeupdateの変更されたイベントのオーディオおよびビデオの再生位置を

さんが、イベントに勝つために、ビデオの長さを、ビデオのメタデータを取得してみましょう

//获取到元数据
this.video.addEventListener('loadedmetadata',function(){
    that.vDuration = this.duration;
    that.vC.querySelector('.duration').innerHTML = stom(that.vDuration);
});

次に、比率を計算幅ビデオ再生進行状況更新イベントからプログレスバーを設定します

//视频播放中事件
this.video.addEventListener('timeupdate', function() {
    var currentPos = this.currentTime;//获取当前播放的位置
    //更新进度条
    var percentage = 100 * currentPos / that.vDuration; 
    //设置宽度
    that.vC.querySelector('.timeBar').style.width = percentage + '%';
});

私たちは、6月はますます膨張プログレスバーを見ることができます。

2.現在の再生時間

同時に、我々はまた、現在再生中の時間表示timeupdateのイベントセットを

//视频播放中事件
this.video.addEventListener('timeupdate', function() {
    var currentPos = this.currentTime;//获取当前播放的位置
    //更新进度条
    var percentage = 100 * currentPos / that.vDuration; 
    that.vC.querySelector('.timeBar').style.width = percentage + '%';
    //更新当前播放时间
    that.vC.querySelector('.current').innerHTML = stom(currentPos);
});

一時停止または停止

それが一時停止している場合、我々は、ビデオをクリックすると、その後、ビデオ再生中に、一時停止する動画をクリックし、一方、演奏、およびトリガイベントの再生を開始し、一時停止トリガイベント。

0時間枠

ラララ、一時停止、再生、timeupdateプログレスバーと現在の再生時間が友人になることはありませんので、イベントは当然、それをトリガしません。

1.再生ボタン

ショーボタンが来て一時停止に

//暂停or停止
this.video.addEventListener('pause',function(){
    that.vimg.style.display = 'block';
});

コントロールバーの表示以下の2

コントロールバー表示、vhiddenスタイルクラスJiuhaolaの直接の除去

//暂停or停止
this.video.addEventListener('pause',function(){
    that.vimg.style.display = 'block';
    that.vC.classList.remove('vhidden');
    that.vC.style.visibility = 'visible';
});

本当のようです書くが、あなたがたsetTimeoutを書く時間前に、コントロールバーを非表示にした場合、この時間は、私たちはああクリアする必要があります。

//暂停or停止
this.video.addEventListener('pause',function(){
    that.vimg.style.display = 'block';
    that.vC.classList.remove('vhidden');
    that.vC.style.visibility = 'visible'; 
    that.vCt && clearTimeout(that.vCt);
});

早送りと巻き戻し

小さなビデオプレーヤーが少ない弾力それへの後退であってもよいかのディアオディアオの騒々し？

さあ、のは、左側のスライド右側スライドイベントのビデオを追加してみましょう

//视频手势右滑动事件
this.video.addEventListener('swiperight',function(e){
    this.currentTime += 5;
});
//视频手势左滑动事件
this.video.addEventListener('swipeleft',function(e){
    this.currentTime -= 5;
});

コンピューター上で直接進行することがデバッグすると、私はまた後で電話でのWebViewを見つけたもの、不思議先頭に、0になるが実現可能であると思われます。

進行状況バーと進行ビデオを変更するには、ドラッグ、私は書いていないので、私は、書き込みするつもりはありません。

フルスクリーン再生

おそらく、我々はより多くのこの権利を懸念しています：

IOSは終わら：動画タグのWebKit playsinlineプロパティーの除去はでき、なぜならIOS H5のvideoタグをサポートしてかなり良いです

//调用原生方式 全屏播放
pro.nativeMax = function(){
    if(!window.plus){
        //非html5+环境
        return;
    }
    if($.os.ios){
        console.log('ios')
        this.video.removeAttribute('webkit-playsinline');
    }else if($.os.android){
        console.log('android');
        var url = this.video.querySelector('source').src;
        var Intent = plus.android.importClass("android.content.Intent");
        var Uri = plus.android.importClass("android.net.Uri");
        var main = plus.android.runtimeMainActivity();
        var intent = new Intent(Intent.ACTION_VIEW);
        var uri = Uri.parse(url);
        intent.setDataAndType(uri, "video/*");
        main.startActivity(intent);
    }
}

initEventでフルスクリーンのイベントを追加します

this.vC.querySelector('.fill').addEventListener('tap',function(){
    that.nativeMax();
});

ビット無味ああをやって、あなたは共通に指すことはできませんか？

質問は、私は本当に一晩たいと少し乾燥を持参することを決めました。

ミニプレーヤーの状態をデフォルトに与えます

var bvd = function(dom) {
    var that = this;
    $.ready(function() {
        //获取视频元素
        that.video = document.querySelector(dom || 'video');
        //获取视频父元素
        that.vRoom = that.video.parentNode;
        //元素初始化
        that.initEm();
        //事件初始化
        that.initEvent();
        //记录信息
        that.initInfo();
        //当前播放模式 false 为 mini播放
        that.isMax = false;
    })
}

//记录信息
pro.initInfo = function() {
    var that = this;
    //在onload状态下，offsetHeight才会获取到正确的值
    window.onload = function(){
        that.miniInfo = {//mini状态时的样式
            width: that.video.offsetWidth + 'px',
            height: that.video.offsetHeight + 'px',
            position: that.vRoom.style.position,
            transform: 'translate(0,0) rotate(0deg)'
        }

        var info = [
                document.documentElement.clientWidth || document.body.clientWidth,
                document.documentElement.clientHeight || document.body.clientHeigth
            ],
            w = info[0],
            h = info[1],
            cha = Math.abs(h - w) / 2;
            
        that.maxInfo = {//max状态时的样式
            width: h + 'px',
            height: w + 'px',
            position: 'fixed',
            transform: 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)'
        }
    }
    
    
}

//全屏 mini 两种模式切换
pro.switch = function() {
    var vR = this.vRoom;
    //获取需要转换的样式信息
    var info = this.isMax ? this.miniInfo : this.maxInfo;
    for(var i in info) {
        vR.style[i] = info[i];
    }
    this.isMax = !this.isMax;
}

//全屏按钮
this.vC.querySelector('.fill').addEventListener('tap', function() {
    //that.nativeMax();
    that.switch();
});

デュードプル、外観を引っ張ります

ルックスと、変位と回転CSS3を使用して、あまりにも非常に良い感じの画面の前でそのビデオのフルスクリーンので、しかし、問題が巻き起こっています

再生ボタンとフルスクリーンでコントロールバーがビデオラベルは親要素の上部をカバーするという事実を隠しているようだ、我々は、対応する調整をしなければなりません

CSS

.bad-video {
    position: relative;
    /*overflow: hidden;*/
    background-color: #CCCCCC;
}

JS
構成設定値の中で最大のZIndex

            that.maxInfo = {//max状态时的样式
                zIndex:99,
                width: h + 'px',
                height: w + 'px',
                position: 'fixed',
                transform: 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)'
            }

水平フル後、イベントを中心にスライドさせる方向の変化に追従しませんでした

        //视频手势右滑动事件
        this.video.addEventListener('swiperight', function(e) {
            console.log('right');
            this.currentTime += 5;
        });
        //视频手势左滑动事件
        this.video.addEventListener('swipeleft', function(e) {
            console.log('left');
            this.currentTime -= 5;

        });

TMこれは非常に恥ずかしいです、私はフルスクリーンは、携帯電話は水平に、また、早送りや巻き戻し下って行ったのですか？

それを行うにはどのようにこの時間、平方ません

ジェスチャースリップイベント

私たちは、イベント登録動画のリストを与えます

    var events = {};
    
    //增加 或者删除事件
    pro.eve = function(ename, callback, isF) {
        if(callback && typeof(callback) == 'function') {
            isF && arguments.callee(ename);
            events[ename] = callback;
            this.video.addEventListener(ename, events[ename]);
            console.log('添加事件：' + ename);
            return;
        }
        var fun = events[ename] || function(){};
        this.video.removeEventListener(ename, fun);
        console.log('删除事件：' + ename);
        return fun;
    }

イベントを追加、削除するには、エージェントを追加するビデオイベントに、イベントが削除される前に、この同じイベント新しいですISFは、無名関数とイベントを追加するので、それはあなたが動的に追加することができますプロキシを設定し、削除することはできませんイベントの内部に記録されたイベント、操作しやすいです

その後、我々は現在の再生や音量の機能を変更することで進捗状況を作ります

    //跳转视频进度 单位 秒
    pro.setCurrentTime = function(t){
        this.video.currentTime += t;
    }
    //设置音量大小 单位 百分比 如 0.1
    pro.setVolume = function(v){
        this.video.volume+= v;
    }

ビデオへのプロキシ経由でイベントに関する上下にスライドを追加します。

        //视频手势右滑动事件
        this.eve('swiperight',function(){
            that.setCurrentTime(5);
        });
        
        //视频手势左滑动事件
        this.eve('swipeleft', function(e) {
            that.setCurrentTime(-5);
        });
        
        //视频手势上滑动事件
        this.eve('swipeup',function(){
            that.setVolume(0.2);
        });
        
        //视频手势下滑动事件
        this.eve('swipedown', function(e) {
            that.setCurrentTime(-0.2);
        });

[OK]を、スライドイベントの4つの方向が後から追加されましたが、これは、フルスクリーン再生中にミニプレーヤーモード、4つの方向のイベントはほとんど下を通過する必要が映像要素と変化の方向と変化しなかったときのイベントですイベントは、フルスクリーンをトリガするかどうかを決定するための最も愚かな方法

        //视频手势右滑动事件
        this.eve('swiperight',function(){
            if(that.isMax){
                return that.setVolume(0.2);
            }
            that.setCurrentTime(5);
        });
        
        //视频手势左滑动事件
        this.eve('swipeleft', function() {
            if(that.isMax){
                return that.setVolume(-0.2);
            }
            that.setCurrentTime(-5);
        });
        
        //视频手势上滑动事件
        this.eve('swipeup',function(){
            if(that.isMax){
                return that.setCurrentTime(-5);    
            }
            that.setVolume(0.2);
        });
        
        //视频手势下滑动事件
        this.eve('swipedown', function() {
            if(that.isMax){
                return that.setCurrentTime(5);    
            }
            that.setVolume(-0.2);
        });

どのように、それは少し愚かに見えるが、それは非常に実用的ですが、

5+フルスクリーンクライアントソリューション

5+クライアントが、アンドロイド再生するネイティブな方法を呼び出すことができますが、まだまだ満足のいくから、我々は解決策を見ることができます

初期化中に、ミニパターン、フルスクリーンの記録時間は、画面の高さの幅を変更することによって、ビデオは、ビデオの高さは、全画面を提供し、変更幅ビデオ、再利用5+スクリーン回転あるステータスバーを隠します

0）を決定するジェスチャーイベントを削除します

因为现在是准备改变移动设备的方向，所以，手势方向会跟着设备方向改变

1）CSS3の回転及び変位を除去します


    //记录信息
    pro.initInfo = function() {
        var that = this;
        //在onload状态下，offsetHeight才会获取到正确的值
        window.onload = function() {
            that.miniInfo = { //mini状态时的样式
                zIndex: 1,
                width: that.video.offsetWidth + 'px',
                height: that.video.offsetHeight + 'px',
                position: that.vRoom.style.position
            }

            that.maxInfo = { //max状态时的样式
                zIndex: 99,
                width: '100%',
                height: that.sw + 'px',
                position: 'fixed'
            }

        }

    }

2）5+と全画面表示を設定すると、ステータスバーを非表示

    //全屏 mini 两种模式切换
    pro.switch = function() {
        var vR = this.vRoom;
        //获取需要转换的样式信息
        var info = this.isMax ? this.miniInfo : this.maxInfo;

        for(var i in info) {
            vR.style[i] = info[i];
        }
        this.isMax = !this.isMax;

        plus.navigator.setFullscreen(this.isMax);
        if(this.isMax) {
            //横屏
            plus.screen.lockOrientation("landscape-primary");
        } else {
            //竖屏
            plus.screen.lockOrientation("portrait-primary");
        }

    }

3）フルスクリーンモード、リターンキーのアンドロイド終わり、全画面を終了するためのトリガ

pro.initEvent = function() {
    //.......省略其他代码
    
    this.oback = $.back;
        //监听安卓返回键
        $.back = function() {
            if(that.isMax) {
                that.switch();
                return;
            }
            that.oback();
        }
}

レンダリング

5+重力感知スイッチフルスクリーン

ねえ、どのように少しはそれを自動的に移動するプレイヤーの最後に、とにかく画面を切り替えていたことができますか？
それらの小さなセクションではどのように横画面の次のフルスクリーントグル、重力センサースイッチ、APIを使用する必要5+手動に知らさ加速度計加速度センサ

简单说：重力加速度感应可以想象成一个小球在坐标系中
三个方向上的加速度。永远以手机屏幕为准

加速度は何ですか？量は、上の物理的な本です

手机水平放置向上是y轴正向
向右是x轴正向，向外是z轴正向

XYZ軸は何ですか？金額は、書籍の数が多い上にあります

ああ、あなたは、直立上がったウォーク、今お使いの携帯電話の画面上で、あなたしている立って、そしてあなたは、x軸で右ストレートを開き、あなたは今、前を見ている人、地面に携帯電話の肖像直立を入れていますy軸、z軸は、あなたの頭です。そのような話は分かりませんが、本当にあなたの携帯電話にステップしたくない、23333

また、追加の説明を表示するように選択することができます：アンドロイド、センサー開発-方向を決定します

X、Y軸の変更：

電話画面が水平に置かれた場合：（X、Y、Z） =（0、0、-9.81）
電話リフトのトップ場合：yが低減され、且つ、負である
ときに電話を持ち上げる底：yの増加、およびあります正
電話右リフト：Xが低減され、負の値
電話左リフト：Xが増加し、正
z軸に変化：
携帯電話の画面は、Z = -9.81上方水平である
ときに携帯電話の画面垂直方向、z = 0の
電話が画面下水平に配置され、Z = 9.81
条件スイッチング鉛直スクリーン
5、垂直の切り替え- Y <=
X <= - 5、トランスデューサは、横方向であります

[OK]を、私たちは、開閉デバイスを監視するための2つのメソッドを追加しました

    //开启方向感应
    pro.startWatchAcc = function(){
        var that = this;
        this.watchAccFun = plus.accelerometer.watchAcceleration(function(a) {
                if(that.getIsMax()){
                    //当前为全屏状态
                    //判断是否满足竖屏Mini状态
                    a.yAxis>=5 && that.setIsMax(false);
                }else{
                    //当前为Mini状态
                    //判断是否满足全屏Max状态
                    Math.abs(a.xAxis) >=5 && that.setIsMax(true); 
                }
            }, function(e) {
                //出错了大不了 不自动旋转呗  让它手动 切换
                console.log("Acceleration error: " + e.message);
                that.clearWatchAcc();
            },{
                frequency:1200
            });
    }
    //关闭方向感应
    pro.clearWatchAcc = function(){
        this.watchAccFun && plus.accelerometer.clearWatch(this.watchAccFun);
    }

そして、初期化方向の監視時にデフォルトでオンになって

    var bvd = function(dom) {
        var that = this;
        $.ready(function() {
            //...
        })

        $.plusReady(function() {
            that.startWatchAcc();
        })

    }

次いで水平フル、双方向クロス画面に変更

実機デバッグを見てみましょう

ねえ、私たちは、デバイスが監視しないでも一時停止イベント応答をクリックしてビデオを再生するように、フルスクリーン再生ボタンを与えるために重力センサーをロックを追加します

ロックボタンを実行します。

もちろん、ロックの写真、アドレスも最高の動的に生成されたラベルのJSで、BASE64で変更

デフォルトでは非表示、上下中央右、上下、その基本的なスタイルを設定します。

        .lock {
            padding: .3rem;
            width: 3rem;
            height: 3rem;
            position: absolute;
            right: .5rem;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            visibility: hidden;
        }

まあ、ソートロジック出てみましょう、

1）デフォルトでミニを再生するとき、ロック隠す
2）フルスクリーン再生には、ディスプレイをロックしますが、4Sの右へ外れコントロールバーに従います
続いロック制御が常に表示されている、3）一時停止にフルスクリーン
ロックがロックされているときにクリックして）4を、ヒントは近い重力の監視、そのまますぐにコントロールバー、隠された右の内側のlock4s、置き換えクリックイベント映像表示ロックアイコン、アンドロイドリターンキーイベントを隠し、ロックされた
あなたは、ロックアンロック、アンロックプロンプト、アンドロイド、リターンキーをクリックします。5）代わりにミニ状態に切り替え、オープン重力モニタリング

私はそれが実際には非常に多くの痛みを伴う、主に論理処理を押し下げている、こすります

0）右のアニメーションを実行した後、1秒内に3秒の遅延の後に移動するアニメーションを追加します。

@keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}

webkit-keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}

.lockhidden {
    animation: lockhide 1s 3s linear;
    -webkit-animation: lockhide 1s 3s linear;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
}

1）全画面表示ロック

    pro.switch = function() {
        //...
        //全屏时 显示锁定 图标
        this.vlock.style.visibility = this.isMax ? 'visible' : 'hidden';

    }

2）フルスクリーン再生、表示をロックしますが、4Sの右へ外れコントロールバーに続く
演奏我々はロックを追加するアニメーション隠されました、

3）フルスクリーン休止、ロックコントロールは常に表示され、続いて

4）ロックにロックをクリックして、ロックされたプロンプト、即時のコントロールバーに隠され、隠された右の内側のlock4sが、近い重力の監視、そのままクリックイベント映像表示ロックアイコン、アンドロイドリターンキーイベントを交換する
5）ロック解除ロックをクリックして、ヒントロック解除、アンドロイドリターンキーではなく、ミニ状態に切り替える重力モニタリングを開きます

    //锁定屏幕
    pro.lockScreen = function() {
        $.toast('锁定屏幕');
        var that = this;
        //更换video点击事件为 显示 lock图标，并保存 video之前的事件 
        this.videoTapFn = this.eve('tap', function() {
            that.lockT = setTimeout(function(){
                that.vlock.classList.add('lockhidden');
            },500);
                //重新开始播放样式
            that.vlock.classList.remove('lockhidden');
            that.vlock.style.visibility = 'visible';
        }, true);
        //隐藏控制条
        this.vC.style.visibility = 'hidden';
        //给Lock图标增加 隐藏样式类
        this.vlock.classList.add('lockhidden');
        //锁定屏幕时，不监控重力感应
        this.clearWatchAcc();
        //标识当前更改的Lock状态
        this.isLock = true;

    }

    //解锁屏幕
    pro.unlockScreen = function() {
        $.toast('解锁屏幕');
        //替换回video之前的点击事件
        this.eve('tap', this.videoTapFn, true);
        //给Lock图标清楚 隐藏样式类
        this.vlock.classList.remove('lockhidden');
        //不锁定屏幕时，监控重力感应
        this.startWatchAcc();
        //标识当前更改的Lock状态
        this.isLock = false;
    }

666）最後に、私たちの愛するロックアイコンにタッチイベントを増やし、イベントアンドロイドリターンキーの変更

        //全屏 时 锁定点击事件
        this.vlock.addEventListener('tap', function() {
            if(that.isLock) {
                that.unlockScreen();
                return;
            }
            that.lockScreen();
        });

        this.oback = $.back;
        //监听安卓返回键
        $.back = function(){
            if(that.isMax){
                if(!that.isLock){
                    //全屏状态下 按下返回键 时，1s内不监控重力，防止返回Mini状态时和重力感应并发事件
                    setTimeout(function(){
                        that.startWatchAcc();
                    },1000);
                    that.clearWatchAcc();
                    that.switch();
                }
                return;
            }
            that.oback();
        }
    }

まあ！この記事5+フルスクリーンデモ元アドレス

書き込みブログは簡単ではないですが、そのシェア気分がとても良いです、それは他のレビューや進捗状況ではないのですか？

ありがとうございます。

この記事関連記事：H5は、独自のビデオプレーヤーの列を作成します