モバイルやWeChatでHTML5の音声が自動再生されない問題を解決。
2022-01-14 21:33:38
H5ページを再度行ったところ、モバイル側とWeChat側で自動再生を追加しても音声が自動再生されないことがわかりました。
通常の解決策は、インタラクティブなイベントを与えることです。
タグを使用します。
<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">
audio属性はこのブラウザではサポートされていません<
回避策
//-- Create a page listener, wait for the WeChat page to finish loading and trigger audio playback
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
//-- Create a touch listener to trigger an event to play audio when the browser opens the page by touching the screen
document.addEventListener('touchstart', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
}
audioAutoPlay();
});
AppleのモバイルWeChat側での回避策もあります
ステップ1:jsファイルの導入
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
ステップ2:設定ファイル
<script>
function autoPlayVideo(){
wx.config({
debug:false,
appId:"",
timestamp:1,
nonceStr:"",
signature:"",
jsApiList:[]
});
wx.ready(function(){
var autoplayVideo=document.getElementById("audio");
autoplayVideo.play()
})
};
autoPlayVideo();
</script>
安定したネットワークがあれば自動再生可能です。
概要
上記は、携帯電話やWeChat側のHTML5オーディオの問題を自動的に再生することはできません解決するためにあなたを紹介するために、私はそれがあなたを助けることを願って、何か質問がある場合は、私にメッセージを与えてください、私は速やかに皆に返信されます。これからもスクリプトハウスのウェブサイトをよろしくお願いします。
この記事がお役に立つと思われる方は、出典を明記の上、ご自由に転載してください!ありがとうございました。
関連
-
Html5プロジェクト適応システムダークカラーモードプログラム概要の詳細説明
-
キャンバスのdrawImageの使用方法
-
Html5 Streamを用いたリアルタイムモニタリングシステムの開発
-
html2canvasを使ってcanvasにhtmlの内容を書き込んで画像を生成する方法
-
HTML5によるアプリケーションキャッシュの実装
-
HTML5 のタッチ イベント(touchstart、touchmove、touchend)の実装
-
html5でhotcss.jsを使い、携帯電話の自己適合を実現する方法
-
プリントイメージ機能のフロントエンド実装
-
ビデオグリーンスクリーンキーイングのキャンバスピクセルポイントマニピュレーション
-
Canvas wave garlandのサンプルコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン