コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
1。 muted属性を使用したビデオをミュートします
2。JavaScriptを使用して動的にミュート/ミュートを解除します
3。ミューティングと自動再生
ホームページ ウェブフロントエンド フロントエンドQ&A HTMLでビデオをミュートする方法

HTMLでビデオをミュートする方法

下次还敢
下次还敢
Sep 17, 2025 am 03:24 AM

HTMLでビデオをミュートするには、デフォルトでオーディオを沈黙させる

HTMLでビデオをミュートする方法

HTMLのビデオをミュートするには、 <video></video>要素でmuted属性を使用できます。これはブールの属性であり、値を必要としないことを意味します。ビデオをミュートするだけです。

HTMLでビデオをミュートする方法

1。 muted属性を使用したビデオをミュートします

<ビデオコントロールMuted>
  <source src = "emple.mp4" type = "video/mp4">
  ブラウザはビデオタグをサポートしていません。
</video>
  • controls 、遊び、一時停止、ボリューム、およびシークコントロールを追加します。
  • mutedビデオが音なしで始まることを保証します。

これは、サウンドが破壊的になるバックグラウンドビデオや自動再生ビデオに一般的に使用されます。

2。JavaScriptを使用して動的にミュート/ミュートを解除します

プログラムでミュートを制御する場合は、JavaScriptを使用してmutedプロパティを切り替えることができます。

HTMLでビデオをミュートする方法
 <ビデオID = "myVideo" Controls>
  <source src = "emple.mp4" type = "video/mp4">
</video>

<button onclick = "mutevideo（）"> mute </button>
<button onclick = "unmutevideo（）"> unmute </button>

<スクリプト>
  const video = document.getElementById（ "myvideo"）;

  function mutevideo（）{
    video.muted = true;
  }

  function unmutevideo（）{
    video.muted = false;
  }
</script>

また、1つのボタンで切り替えることもできます。

 <button onclick = "togglemute（）">トグルmute </button>

<スクリプト>
  function togglemute（）{
    const video = document.getElementById（ "myvideo"）;
    video.muted =！video.muted;
  }
</script>

3。ミューティングと自動再生

ブラウザは、多くの場合、サウンド付きのビデオの自動再生をブロックします。一般的な回避策は、自動再生できるようにビデオをミュートすることです。

HTMLでビデオをミュートする方法
 <ビデオオートプレイミュートループ>
  <source src = "background-video.mp4" type = "video/mp4">
</video>
  • autoplayビデオを自動的に開始します。
  • mutedにより、Autoplayはほとんどのブラウザで動作できます。
  • loopビデオを繰り返します。

これは、Webサイト上のヒーローセクションの背景ビデオに広く使用されています。

基本的には、 <video></video>タグにmutedタグを追加して沈黙させるだけです。詳細を制御するには、JavaScriptを使用して、必要に応じてmutedプロパティを変更します。

以上がHTMLでビデオをミュートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

ArtGPT

ArtGPT

Stock Market GPT

Stock Market GPT

AIを活用した投資調査により賢明な意思決定を実現

もっと見る

人気の記事

Bing Homepageクイズと勝利のプレイ方法（クイックガイド）
2週間前 By DDD
大規模なプレーヤーによって公開されているXPLコインは、発売時に1米ドルを超えることができますか？
4週間前 By DDD
2025年9月のイーサリアム価格予測：ETHは5,000ドルのマークを突破できますか？
4週間前 By DDD
Windows11と10でヘルプを取得する方法（クイックガイド）
1週間前 By DDD
Facebookアカウントにログインできないのはなぜですか？
2週間前 By 下次还敢
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

PHP チュートリアル
1679
276
NYTの接続はヒントと回答です
327
836
もっと見る
Related knowledge
CSSを使用してTextareaをスタイリングする方法 CSSを使用してTextareaをスタイリングする方法 Sep 16, 2025 am 07:00 AM

まず、幅、高さ、マージン、境界、フォント、色などの基本的なスタイルを設定します。 2。インタラクティブなフィードバックを強化して：Hoverおよび：フォーカス状態。 3。サイズ属性を使用して、サイズの動作を制御します。 4。::プレースホルダーの擬似要素を使用して、プレースホルダーテキストをスタイリングします。 5.レスポンシブデザインを使用して、デバイス間の可用性を確保します。 6.相関ラベル、色のコントラスト、フォーカスの概要に注意を払って、アクセシビリティを確保し、最終的に美しく機能的なテキストレアスタイルを実現します。

HTMLの絶対URLと相対URLの違いは何ですか？ HTMLの絶対URLと相対URLの違いは何ですか？ Sep 16, 2025 am 07:57 AM

Anabsoluteurlincludesthefullwebaddressressdressdressdrain、whileareLativeurlspecifiesapathrelativetothecurrentpage.1.useabsoluteurlsforexternalwebsites、suringlinksworkanywhere、およびwhencontentmaybeshared.2.usererlativeativedigation.2

HTMLでタイムタグを使用する方法 HTMLでタイムタグを使用する方法 Sep 19, 2025 am 03:35 AM

theTagisusedusedusedtoredtateSandTimesInAmachine-readable-format whiledisplayinghuman-readabletext.2.itsupportsvariousdateTimedateTimedatincludingdateonly、timeonly、dateandtimewithtimezone、およびpartialdateSviateTributeTributedateTributedateTributedatedatedatedates

JavaScriptの配列で最大値を取得する方法 JavaScriptの配列で最大値を取得する方法 Sep 21, 2025 am 06:02 AM

usemath.max（... array）forsmalltomediumarray; 2.usemath.max.apply（null、array）forbettercompatibility withlargearraysinolderenvironments;

ブートストラップで進行状況バーを作成する方法 ブートストラップで進行状況バーを作成する方法 Sep 20, 2025 am 05:21 AM

.Progress Containerと.Progress-Bar要素を使用して基本的な進捗バーを作成し、Style = "width：50％;"から幅を設定します。 " ARIA属性を追加してアクセシビリティを向上させます。 2。「75％」などのテキストを直接追加して、.progress-barに進行状況タグを表示できます。 3. BGサクセス、BGWarning、BG-Danger、およびその他のクラスを使用して、異なる色を設定できます。 4.ストライプ効果を実現するために.Progress-Barストライプを追加し、.progress-bar-animatedを組み合わせてストライプを動的に動かす。 5。複数.Progr

HTMLでビデオをミュートする方法 HTMLでビデオをミュートする方法 Sep 17, 2025 am 03:24 AM

tomuteavideoinhtml、usethedbooleanattributeinthetag、whusilencestheaudiobydefault.2.fordynamiccontrol、usejavascripttosetv IDEO.MUTED = TrueOrfalse、ortoggleitwithvideo.muted =！video.mutedforinteractivemute/unmutefunctionality.3.combinemutedwithautopla

ブラウザのレンダリングパイプラインの実用的なガイド ブラウザのレンダリングパイプラインの実用的なガイド Sep 21, 2025 am 06:30 AM

BrowsErrenderswebpagesbyparsinghtmlandcs ssintothedomandcssom、themintoarendertreeを組み合わせて、PerforminglayoutttoculateElementGeometry、PaintingPixels、およびCompositingLayers.2.tooptimizeperforformance、minimizerenderenderenderenderenderendersourcesbyinlinginlinginlinginlingiccsan

CSSでテキストに応答するようにする方法 CSSでテキストに応答するようにする方法 Sep 15, 2025 am 05:48 AM

tomaketextresponsiveincss、userelivateunitslikerem、vw、andclamp（）withmediaqueries.1.replacefixedpixelswithremforconsistentscali ngbasedOnRootFontSize.2.USEVWFORFFRUIDSCALINGBUTCOMBINEWITHCALC（）ORCLAMP（）TOPREVENTEXTREMES.3.APPLYMEDAQUERIESATCOMMONBREAKPO

See all articles