マイクロ手紙HTML5ビデオビデオプレーヤーソリューション

オリジナルリンク:https://www.jianshu.com/p/e4573acf6564

 

 

WebKitの-playsinline && playsinline = "true" を

  • 再生するには、小さなウィンドウテキストフローから逸脱することなく、ビデオを、しかし、WebViewのために必要である(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES )、 その結果が今され、アップルによってサポートされアンドロイドはサポートしていませんアンドリュースは、フルスクリーンで再生されます。

X-のWebKit-オンエア= "許可"

  • オンエアを許可する(現在の映像がオンエアを通じてこの技術をサポートする他のデバイスに置くことができます。)

X5-ビデオプレーヤー型= "H5"

  • ビデオ属性「X5-ビデオプレーヤー型」文を経由して同一の層H5プレーヤーを有効に
  • X5-ビデオプレーヤー型は値型をサポートしていますH5
  • このプロパティは、演奏後に無効に設定、再生する前に設定する必要があります

X5-ビデオプレーヤー - フルスクリーン= "true" を

  • あなたは、このようなマイクロチャネルとして、(ビデオが再生されていない前に)あなたが宣言しない場合は、タイトルバーの居住者があるでしょう、ビューポートの元のサイズに、ビューポートの面積を取得するには、このプロパティページを宣言しない場合はビデオの再生には、フルスクリーンモードに入ります再生中、このプロパティは、このページは、タイトルバーの高さは、均等に2つ(上下黒ブロック)に分割さを与えることはありません
  • 注意:このプロパティが宣言され、それが再適応自分のページに新しいビューポートのサイズの変更をする必要があります。イベントのサイズを変更するために聞くことによって達成することができます
window.onresize = function(){
    test_video.style.width = window.innerWidth + "px"; test_video.style.height = window.innerHeight + "px"; } 

X5-ビデオ配向制御水平および垂直スクリーン

  • 免責プレイヤーは方向をサポートしています
  • 使用可能な値:風景風景、portrain縦画面;デフォルトportrain
  • 自動的に回転させるように携帯電話をフォロー
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/> 

方法

自動再生

setTimeout(function () { video.play(); }, 1000);
video.addEventListener('touchstart', function () { video.play(); }); 

フルスクリーンを入力します。

video.on('x5videoenterfullscreen', function() {
    //延时修改video尺寸以占满全屏 //$(this).attr('x5-video-player-type',''); setTimeout(function() { $('video').css({ width: window.innerWidth, height: window.innerHeight, }); }, 200); }); 

終了フルスクリーン

//退出全屏状态
video.on('x5videoexitfullscreen', function() { //清除 $(this).css({ width: '', height: '', }); }); 

層と制御のビデオ再生位置

video {
    object-position: 0 0;
}

ビデオバッファの進行状況を取得します。

function gp() {
    var _this=video;// video为当前video元素
    var percent=null;
    // FF4+, Chrome
    if (_this && _this.buffered && _this.buffered.length > 0 && _this.buffered.end && _this.duration) { percent = _this.buffered.end(0) / _this.duration; } // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end() // to be anything other than 0. If the byte count is available we use this instead. // Browsers that support the else if do not seem to have the bufferedBytes value and // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8. else if (_this && _this.bytesTotal != undefined && _this.bytesTotal > 0 && _this.bufferedBytes != undefined) { percent = _this.bufferedBytes / _this.bytesTotal; } if (percent !== null) { percent = 100 * Math.min(1, Math.max(0, percent)); return percent; } return 0; }


著者:Vinashed
リンクします。https://www.jianshu.com/p/e4573acf6564
出典:ジェーン・ブック
著者によって予約ジェーンブックの著作権、いかなる形で再現され、承認を得るために、作者に連絡して、ソースを明記してください。

おすすめ

転載: www.cnblogs.com/macliu/p/10956824.html
おすすめ