ホームページ ウェブフロントエンド htmlチュートリアル Web ページにビデオを挿入するにはどうすればよいですか?

Web ページにビデオを挿入するにはどうすればよいですか?

Jul 18, 2017 pm 04:41 PM
入れる プラン ビデオ

インターネット上の情報量が日々増加するにつれて、Web サイトもデータ情報の多様化とパーソナライズされたデザインにますます注目しています。マルチメディア技術の漸進的な開発と改善により、ビデオ、オーディオ、PPT、チャートなどからビデオまでのオンライン表示形式の開発の条件が提供されました。

今日は、Web ページにビデオを挿入する解決策について説明します。ビデオ タグの使用方法については説明しません。ビデオ タグのより互換性のある記述方法は次のとおりです。ただし、一般的には同じビデオです。時間がかかりすぎるため、MP4、ogg、webm、swf (flash) の 4 つの形式のビデオは生成されません。

最初に説明する解決策は、ビデオを iQiyi、Youku、Tencent などのサードパーティのビデオ Web サイトにアップロードし、サードパーティの Web サイトによって提供されるコードを使用することです (ビデオが見つかった下の [共有] ボタンにあります)。具体的なテスト コードは次のとおりです:

 1 <video width="800" height=""> 2         <source src="myvideo.mp4" type="video/mp4"></source> 3         <source src="myvideo.ogv" type="video/ogg"></source> 4         <source src="myvideo.webm" type="video/webm"></source> 5         <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> 6             <param name="movie" value="myvideo.swf" /> 7             <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" /> 8         </object> 9         当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>10     </video>
ログイン後にコピー

Web ページの表示効果は次のとおりです:

サードパーティのビデオ Web サイトでコードを共有する場合は、共通のコードを選択してください。 PC 端末とモバイル端末の両方でビデオを良好に表示できるようにします。

2 番目のオプションとして説明するのは、ckplayer プラグインの使用です。

ckplayer プラグインの公式 Web サイトは次のとおりです。

公式 Web サイトには、独自のニーズに応じて設定できる、より良いテスト コードがあります。 HTML5 プレーヤー、

 1 <!DOCTYPE html> 2 <html lang="zh"> 3  4     <head> 5         <meta charset="UTF-8" /> 6         <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7         <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8         <title>网页中插入视频的方法</title> 9         <style type="text/css">10             * {11                 margin: 0;12                 padding: 0;13             }14             15             body {16                 text-align: center;17             }18             19             div {20                 font-size: 18px;21                 color: #2E8DED;22                 margin-top: 20px;23             }24         </style>25     </head>26 27     <body>28         <!--爱奇艺视频(无通用代码) 只支持PC端 IE8以上都可以-->29         <div>30             爱奇艺视频(无通用代码) 只支持PC端 IE8以上都可以31         </div>32         <embed src="http://player.video.qiyi.com/8b89d9c3ec3535c93ceaded663cc91c2/0/0/v_19rr7zq9xw.swf-albumId=715375800-tvId=715375800-isPurchase=0-cnId=25" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>33         <div>34             腾讯视频 全部支持 IE8以上都可以35         </div>36         <!--腾讯视频 全部支持 IE8以上都可以-->37         <iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=p0521h3uu1a&tiny=0&auto=0" allowfullscreen></iframe>38         <div>39             优酷视频 全部支持 IE8以上都可以40         </div>41         <!--优酷视频 全部支持 IE8以上都可以-->42         <iframe height=498 width=510 src=&#39;http://player.youku.com/embed/XMjg2OTA1NDc5Mg==&#39; frameborder=0 &#39;allowfullscreen&#39;></iframe>43     </body>44 45 </html>
ログイン後にコピー

PC 版の効果:

モバイル版の効果:

注: ビデオは MP4 のみを使用する必要があります。現在、ほとんどのブラウザでサポートされており、処理する必要がある形式。 ビデオ形式はほとんどありません。次に、ckplayer プラグインを使用すると、PC およびモバイル ブラウザーと完全に互換性があります (テスト後、IE8 ビデオは再生できません

)。

概要:

まず、ビデオをサードパーティのビデオ Web サイトにアップロードすることをお勧めします。互換性が高く、ビデオはすぐに読み込まれ、Web サイト サーバーの帯域幅リソースを占有しません。

2 番目に、

ckplayer プラグインを使用して、ローカル ビデオを Web ページに挿入します。

以上がWeb ページにビデオを挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

動画ファイルはブラウザのキャッシュのどこに保存されますか? 動画ファイルはブラウザのキャッシュのどこに保存されますか? Feb 19, 2024 pm 05:09 PM

ブラウザはビデオをどのフォルダにキャッシュしますか? 私たちは毎日インターネット ブラウザを使用するときに、YouTube でミュージック ビデオを視聴したり、Netflix で映画を視聴したりするなど、さまざまなオンライン ビデオを視聴することがよくあります。これらのビデオは読み込みプロセス中にブラウザによってキャッシュされるため、将来再び再生するときにすぐに読み込むことができます。そこで問題は、これらのキャッシュされたビデオが実際にどのフォルダーに保存されるのかということです。ブラウザーが異なれば、キャッシュされたビデオ フォルダーは異なる場所に保存されます。以下に、いくつかの一般的なブラウザとそのブラウザを紹介します。

Wink でビデオの透かしを削除する方法 Wink でビデオの透かしを削除する方法 Feb 23, 2024 pm 07:22 PM

Wink でビデオからウォーターマークを削除するにはどうすればよいですか? winkAPP にはビデオからウォーターマークを削除するツールがありますが、ほとんどの友達は wink でビデオからウォーターマークを削除する方法を知りません。次は Wink でビデオからウォーターマークを削除する方法の画像です。編集者が持参したテキストチュートリアルですので、興味のある方はぜひ見に来てください! Wink でビデオ透かしを削除する方法 1. まず、Wink APP を開き、ホームページ領域で [透かしを削除] 機能を選択します; 2. 次に、アルバムで透かしを削除したいビデオを選択します; 3. 次に、ビデオを選択してクリックしますビデオ編集後、右上隅にある [√]; 4. 最後に、下図のように [ワンクリック印刷] をクリックし、[処理] をクリックします。

他人の動画をDouyinに投稿することは侵害になりますか?侵害せずにビデオを編集するにはどうすればよいですか? 他人の動画をDouyinに投稿することは侵害になりますか?侵害せずにビデオを編集するにはどうすればよいですか? Mar 21, 2024 pm 05:57 PM

ショートビデオプラットフォームの台頭により、Douyinはみんなの日常生活に欠かせないものになりました。 TikTokでは世界中の面白い動画を見ることができます。他人のビデオを投稿することを好む人もいますが、「Douyin は他人のビデオを投稿することを侵害しているのでしょうか?」という疑問が生じます。この記事では、この問題について説明し、著作権を侵害せずに動画を編集する方法と、著作権侵害の問題を回避する方法について説明します。 1.Douyin による他人の動画の投稿は侵害ですか?私の国の著作権法の規定によれば、著作権者の著作物を著作権者の許可なく無断で使用することは侵害となります。したがって、オリジナルの作者または著作権所有者の許可なしに他人のビデオをDouyinに投稿することは侵害となります。 2. 著作権を侵害せずにビデオを編集するにはどうすればよいですか? 1. パブリックドメインまたはライセンスされたコンテンツの使用: パブリック

Douyin に動画を投稿して収益を得るにはどうすればよいですか?初心者はどうやってDouyinでお金を稼ぐことができますか? Douyin に動画を投稿して収益を得るにはどうすればよいですか?初心者はどうやってDouyinでお金を稼ぐことができますか? Mar 21, 2024 pm 08:17 PM

全国的なショートビデオプラットフォームであるDouyinは、自由な時間にさまざまな興味深く斬新なショートビデオを楽しむことができるだけでなく、自分自身を示し、自分の価値観を実現するステージも提供します。では、Douyin に動画を投稿してお金を稼ぐにはどうすればよいでしょうか?この記事ではこの質問に詳しく答え、TikTokでより多くのお金を稼ぐのに役立ちます。 1.Douyin に動画を投稿してお金を稼ぐにはどうすればよいですか?動画を投稿し、Douyin で一定の​​再生回数を獲得すると、広告共有プランに参加できるようになります。この収入方法はDouyinユーザーにとって最も馴染みのある方法の1つであり、多くのクリエイターにとって主な収入源でもあります。 Douyin は、アカウントの重み、動画コンテンツ、視聴者のフィードバックなどのさまざまな要素に基づいて、広告共有の機会を提供するかどうかを決定します。 TikTok プラットフォームでは、視聴者がギフトを送ったり、

画質を圧縮せずにWeiboに動画を投稿する方法_画質を圧縮せずにWeiboに動画を投稿する方法 画質を圧縮せずにWeiboに動画を投稿する方法_画質を圧縮せずにWeiboに動画を投稿する方法 Mar 30, 2024 pm 12:26 PM

1. まず携帯電話で Weibo を開き、右下隅の [Me] をクリックします (図を参照)。 2. 次に、右上隅の [歯車] をクリックして設定を開きます (図を参照)。 3. 次に、[一般設定] を見つけて開きます (図を参照)。 4. 次に、[Video Follow] オプションを入力します (図を参照)。 5. 次に、[ビデオアップロード解像度]設定を開きます(図を参照)。 6. 最後に、圧縮を避けるために [オリジナルの画質] を選択します (図を参照)。

小紅書ビデオ作品を公開するにはどうすればよいですか?動画を投稿する際に注意すべきことは何ですか? 小紅書ビデオ作品を公開するにはどうすればよいですか?動画を投稿する際に注意すべきことは何ですか? Mar 23, 2024 pm 08:50 PM

短編ビデオ プラットフォームの台頭により、Xiaohongshu は多くの人々が自分の生活を共有し、自分自身を表現し、トラフィックを獲得するためのプラットフォームになりました。このプラットフォームでは、ビデオ作品の公開が非常に人気のある交流方法です。では、小紅書ビデオ作品を公開するにはどうすればよいでしょうか? 1.小紅書ビデオ作品を公開するにはどうすればよいですか?まず、共有できるビデオ コンテンツがあることを確認します。携帯電話やその他のカメラ機器を使用して撮影することもできますが、画質と音声の明瞭さには注意する必要があります。 2.ビデオを編集する:作品をより魅力的にするために、ビデオを編集できます。 Douyin、Kuaishou などのプロ仕様のビデオ編集ソフトウェアを使用して、フィルター、音楽、字幕、その他の要素を追加できます。 3. 表紙を選択する: 表紙はユーザーのクリックを誘致するための鍵です。ユーザーのクリックを誘致するために、表紙には鮮明で興味深い写真を選択してください。

iPhoneのビデオからスローモーションを削除する2つの方法 iPhoneのビデオからスローモーションを削除する2つの方法 Mar 04, 2024 am 10:46 AM

iOS デバイスでは、カメラ アプリを使用してスローモーション ビデオを撮影できます。最新の iPhone を使用している場合は、1 秒あたり 240 フレームのビデオを撮影することもできます。この機能により、高速アクションを詳細にキャプチャできます。ただし、ビデオの詳細やアクションをよりよく理解するために、スローモーション ビデオを通常の速度で再生したい場合もあります。この記事では、iPhone上の既存のビデオからスローモーションを削除するすべての方法を説明します。 iPhoneでビデオからスローモーションを削除する方法[2つの方法] 写真アプリまたはiMovieアプリを使用して、デバイス上のビデオからスローモーションを削除できます。方法 1: 写真アプリを使用して iPhone で開く

UC ブラウザでダウンロードしたビデオをローカルビデオに変換する方法 UC ブラウザでダウンロードしたビデオをローカルビデオに変換する方法 Feb 29, 2024 pm 10:19 PM

UC ブラウザでダウンロードしたビデオをローカルビデオに変換するにはどうすればよいですか?多くの携帯電話ユーザーは UC Browser を好んで使用しており、Web を閲覧するだけでなく、オンラインでさまざまなビデオやテレビ番組を視聴したり、お気に入りのビデオを携帯電話にダウンロードしたりすることもできます。実は、ダウンロードした動画をローカル動画に変換することもできますが、その方法がわからない人も多いでしょう。したがって、エディターは、UC ブラウザーによってキャッシュされたビデオをローカルビデオに変換する方法を特別に提供します。 uc ブラウザーのキャッシュされたビデオをローカルビデオに変換する方法 1. uc ブラウザーを開き、「メニュー」オプションをクリックします。 2.「ダウンロード/ビデオ」をクリックします。 3. 「キャッシュされたビデオ」をクリックします。 4. 任意のビデオを長押しし、オプションがポップアップ表示されたら、「ディレクトリを開く」をクリックします。 5. ダウンロードしたいものにチェックを入れます

See all articles