1、質問をします
ある日は、需要、携帯電話の動画ページH5に参加する必要性を受け、私は喜んでPMは、ビデオの再生が開始されますページを入力するようにユーザーを望んでいる、質問が来たときに送達するための準備ができて、終了し、どのユーザーマニュアルありませんクリックしてください。
2、解決しようとします
加自動再生
「ビデオ自動再生」の需要は大丈夫です、私は何の問題も発生しませんでした、少しは、スムーズに実行PCのブラウザで、ビデオラベルにインタビューを自動再生属性のものを追加することになりますが、携帯電話のブラウザは内部でオープン、ちょうど自動再生が同じで設定されていません。
リスニングcanplay
それは、私はページをロードし終えた作品、ビデオモニタcanplay、プレイを行うには、（）、右、実行することができるはずはありませんか？しかし、携帯電話に見て、そうでありませんか。
<video id="video" src="video.mp4" controls></video>
var video = document.querySelector('#video');
video.addEventListener('canplay', function () {
video.play();
})3、思考
質問は、プラス、あなたが理解できない自動再生、モバイルブラウザは、この属性をサポートしていないかもしれませんが、私は、従来の方法でプログラムがある手動での遊び（）、に、ビデオモニタをロードし、なぜ動作しませんか？
私は複数のアラートを追加したコールバックをリッスンしようと、私はポップアップボックスが見つかりませんでした。
私は長い時間のためだと思うので、メモリサイズの制限は、ビデオモニタではない、完成荷重が生じているため、お使いの携帯電話は、自動的にビデオを再生することはできません。
4.ソリューション
ポップアップボックスを使用してスキーム1
セグメントに放浪昨日、今オリジナルの携帯電話のブラウザで発見されたが、オートプレイ動画ページに許可され、そして唯一のユーザとの対話を持っていない、それがビデオを再生することができます。（オーディオ同様に、言及し、ここでそれを繰り返すない）
私はそれを試した後、プラスページボックスの爆弾は、（完成されたものの相互作用に相当）爆弾ボックスをユーザーがクリックすると、ビデオを開始し、見つけることができる演奏、コードの一部次の。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<title>视频自动播放</title>
<style>
html, body {
width: 100%;
height: 100%;
}
.video-container {
width: 300px;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 0 auto;
}
#video {
display: block;
width: 100%;
}
#mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.83);
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.pop-container {
width: 250px;
height: 200px;
background: white;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
width: 50px;
height: 30px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="video-container">
<video id="video" src="video.mp4"></video>
</div>
<div id="mask">
<div class="pop-container">
<p>页面内有自动播放视频 请注意流量</p>
<button onclick="playVideo()">我知道了</button>
</div>
</div>
<script>
function playVideo() {
document.getElementById('mask').style.display = 'none';
var video = document.querySelector('#video');
video.play();
}
</script>
</body>
</html>そのため、一般的には、ページが爆弾ボックスのユーザーとの対話がロードされたときに、ビデオ自動再生を解決することで自動的に再生を開始する前に発生した（それはあなたの携帯電話が本当にユーザートラフィックに非常に非常に重要であると思われます。）
問題
上記の方法によれば、限りあなたは、あなたが発生、それは醜いだろうと対話するユーザーを導くために、追加のアクションを使用している必要があり、自動的に、携帯電話のページを入るとすぐに動画を再生するにはページの最後に達成したいと、方法がないことをあなたがすることはできません爆弾でそれをボックス？答えはイエスです。
シナリオ2使用jsmpeg.js
jsmpegは、私は精通していないです正直に言うと、特にどのように使用するには、関連する文書をBaiduのことができ、ビデオデコーダで聞いたライブビデオ機能は、動画を解決するために、この時間はページエンドを利用jsmpegたときに最初に聞きました自動再生需要も他の人のアイデアから学びます。
プロジェクトはjsmpeg.min.jsを導入されました）：次のように:(前提をキーコードがあります
<canvas id="canvas" height="750" width="750"></canvas>
页面加载完成的时候执行下面的js代码：
var canvas = document.querySelector('#canvas');
// 注意这里需要将video.mp4转换成ts格式的文件 才能生效
var player = new JSMpeg.Player('video.ts', { canvas: canvas, loop: false, autoplay: false, audio: true });
player.audioOut.unlock(this.onUnlocked);
player.play();
// onUnlocked方法
function onUnlocked() {
player.volume = 1;
}だから、ビデオとユーザーとの対話を自動的に再生することができない場合でも、
ポイントに注意を払う
、それが地元の方言である場合1.demoは、正しくロードされたTSファイルを実行するために、サーバーの上に配置されている必要があり、直接ローカルサーバーをプレイする必要が、実行するためにブラウザにドラッグしていない
2 .TSファイルのエンコーディングは、MPEGエンコーディングにする必要があり、現在の高度なtsは符号化方式を考慮に入れてはH.264で、見つかったの前にH.264は、放送TSないでエンコードされた
問題の
1、放送映像が何の音ではありません
添付します参照リンク：マイクロチャンネル自動再生ビデオアンドロイド（インタラクティブ、階層的なセット、ノーストリップ、非X5）ffmpegの、jsmpeg.js、.TSビデオ
5、サプリメント
1.何があっ法、オンデマンドビデオ自動再生が、リアルプレーヤーの例で実現することによって、最終的なものの、そう、あなたはvideoタグを使用した場合、けれどもビデオの幅と高さを設定することがわかりますが、それは仕事をしません以下のビデオはで属性を適用する
<動画ID =「ビデオ」SRC =「」コントロールはWebKitの-playsinline =「WebKitの-playsinline」playsinline> </ビデオ>
ビデオは、固定領域に再生することができ、このように。
スキーム1の考えと2は、実際には、達成することができたときに、ユーザーのアップロードビデオのプレビュー
<input type="file" id="filepicker" accept="video/mp4" onchange="chooseVideoInput()">
<div class="video-container">
<video id="video" src="" controls webkit-playsinline="webkit-playsinline" playsinline></video>
</div>
<script>
function chooseVideoInput() {
var files = document.getElementById('filepicker').files[0];
var video = document.getElementById('video');
// 注意下面3行代码
var url = URL.createObjectURL(files);
video.src = url;
video.play();
}
</script>3.再生可能jsmpegはTS MP4ファイルに変換する方法
、jsmpegインストール次のコマンドを実行し、BREW使用後に、MAC OSの下で自作マウント：ffmpegの-i in.mp4 -f mpegts -codec： V mpeg1video -codec：MP2 - B 0 out.ts（in.mp4前記オリジナルビデオout.ts充填経路とTSの転送経路）、効果的なプロ試験
6、まとめ
実際には、のブラウザビデオの問題は、ときにそのような質問を「あなたは、音声自動再生を達成するためにどのような良い方法、chrome66禁止自動再生後に」セグメントでブラウズする昨日長い時間のために私を困惑、突然、答えを見に行きます彼は奨励し、複製能を発見するのが得意でなければならないので、映像が同じ状況が、今日の下に見えた、それは本当に、長い時間のための質問の解決策、のようなものであると思うされていません。
上記のソリューションは、かどうかサプリメント、モバイルブラウザビデオ関連の半分以上の問題を解決することができるだろう、残りの質問は、追加する機会を持っています。
参考リンク：
それは、音声自動再生を達成するためにchrome66無効に自動再生した後、どのような良い方法
マイクロチャネルのAndroid自動再生ビデオ（インタラクティブ、階層的なセット、ノーコントロールバー、非X5）ffmpegの、jsmpeg.jsは、ビデオ.TS
マック自作をインストールOSXの下で
MACシステムをインストールするにはffmpegの
HTML5のオーディオおよびビデオプレーヤー（ビデオ、オーディオ）と共通ピット処理
ビデオのフルスクリーン再生は、マイクロチャネルとQQのブラウザで解決されていません