主流のブラウザと互換性のある使いやすい HTML ビデオ プレーヤー

高洛峰
リリース: 2017-03-10 13:20:52
オリジナル
7804 人が閲覧しました

最近の作業要件では、モバイル クライアントから送信されたビデオを Web ページで再生すること、およびビデオを Web ページにアップロードして再生することが必要です (教育ビデオのアップロードや動的共有など) (ブロガーの考え: モバイル クライアントによってアップロードされることはありません)携帯電話のプレーヤーを使用して視聴することはできません。Web ページにアップロードしたり、Youku や YouTube などの有名な Web サイトにアップロードしたり、自分の Web サイトのリンクを直接引用したりすることはできません。サーバーの帯域幅を占有する必要はありませんが、経済的で手頃な価格です!!!)。

マルチメディアのアップロードと一般的なファイルのアップロードに違いはないため、ここでは詳しく説明しません。理解できない場合は、http://www.php.cn/php/php-file にアクセスしてください。詳細については、-upload.html をご覧ください。

ビデオのスクリーンショットはサーバー側で作成されるか、現時点では非常に安定している ffmpeg を使用して作成されます。

最初はYoukuのようなプロの動画サイトを真似しようと思ったのですが、すべてFlashで実装されていることが分かりましたが、ブロガーはFlashのことはよく知っていて、それについては何も知りませんでした(ふふふ…)、どうやらYouTubeのようでした他の試みを始めたので、このエリアでの探索は断念しました。

長い間Googleの腕に落ちて、ようやくHTML5のvideoタグが良さそうだと気づきました。残念ながら、HTML5はトレンドなので、そうすることにしました。この分野で頑張ってください。 (ブロガーは何気なく考えました。ビデオを再生するにはタグが 1 つだけあれば完了です。彼は私が愚かだと考える必要はありません...はははは)

1 時間かけて検索した結果、http:/ を見つけました。 /www.php.cn /html/html-html_videos.html 解決策は次のとおりです:

コードは次のとおりです:

<video width="320" height="240" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
<source src="movie.webm" type="video/webm" /> 
<object data="movie.mp4" width="320" height="240"> 
<embed src="movie.swf" width="320" height="240" /> 
</object> 
</video>
ログイン後にコピー

視覚的には、このメソッドはほとんどの状況と互換性があるはずです。

ただし、ユーザーがアップロードするビデオ形式を阻止したり、ユーザーが使用するブラウザの種類を制御したりすることはできません。ユーザーは 1 つのビデオ形式のみをアップロードしますが、各ブラウザでサポートされているビデオ形式は一貫していません (邪悪なブラウザ.. .), この考えに基づいて、すべてのブラウザのすべてのビデオ形式と互換性があり、美しい外観と強力な制御性を備えたプラグインがあれば素晴らしいと思います。理想は綺麗だけど現実はガリガリ。しかし、長い間グーグルで調べた結果、主流のブラウザを vedio タグと互換性のある http://html5media.googlecode.com/svn/trunk/src/html5media.min.js にすることができる js プラグインを見つけました
Web 上でビデオを再生することもできます インラインビデオを使用する方法 (img タグを使用します。奇妙なことに、IE のみがこのモードをサポートしており、通常は有効になっていません) とアシスタントを使用する方法の 2 つがあります。したがって、いくつかのアシスタントを使用して、上記でサポートされていない種類のビデオ ファイル (例: QuickTime) を再生できます

上記 2 つの点に基づくビデオ再生コードは次のとおりです:

コードは次のとおりです。フォローします:

rreee


以上が主流のブラウザと互換性のある使いやすい HTML ビデオ プレーヤーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!