{"id":186,"date":"2025-11-25T09:08:20","date_gmt":"2025-11-25T01:08:20","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=186"},"modified":"2025-11-25T09:08:32","modified_gmt":"2025-11-25T01:08:32","slug":"html%e4%b8%ad%e5%ae%9e%e7%8e%b0%e9%9f%b3%e4%b9%90%e6%88%96%e8%a7%86%e9%a2%91%e8%87%aa%e5%8a%a8%e6%92%ad%e6%94%be%e6%a1%88%e4%be%8b%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/html%e4%b8%ad%e5%ae%9e%e7%8e%b0%e9%9f%b3%e4%b9%90%e6%88%96%e8%a7%86%e9%a2%91%e8%87%aa%e5%8a%a8%e6%92%ad%e6%94%be%e6%a1%88%e4%be%8b%e8%af%a6%e8%a7%a3\/","title":{"rendered":"HTML\u4e2d\u5b9e\u73b0\u97f3\u4e50\u6216\u89c6\u9891\u81ea\u52a8\u64ad\u653e\u6848\u4f8b\u8be6\u89e3"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u5957 \u5b8c\u6574\u3001\u53ef\u76f4\u63a5\u4f7f\u7528\u3001\u542b\u79fb\u52a8\u7aef\u517c\u5bb9\u65b9\u6848<\/strong> \u7684
HTML \u4e2d\u5b9e\u73b0\u97f3\u4e50 \/ \u89c6\u9891\u81ea\u52a8\u64ad\u653e<\/strong> \u7684\u8be6\u89e3\u6559\u7a0b + \u6848\u4f8b\u4ee3\u7801\u3002
\u5305\u62ec\uff1a\u684c\u9762\u7aef\u81ea\u52a8\u64ad\u653e\u3001\u79fb\u52a8\u7aef\u5fae\u4fe1\/\u6296\u97f3\/H5 \u7684\u9650\u5236\u7ed5\u8fc7\u65b9\u6848\u3001\u7528\u6237\u89e6\u53d1\u6fc0\u6d3b\u3001\u9759\u97f3\u81ea\u52a8\u64ad\u653e\u7b49\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83d\udeab \u4e3a\u4ec0\u4e48\u81ea\u52a8\u64ad\u653e\u4f1a\u88ab\u7981\u6b62\uff1f<\/h1>\n\n\n\n

\u73b0\u4ee3\u6d4f\u89c8\u5668\u4e3a\u4e86\u9632\u6b62\u9a9a\u6270\uff08\u81ea\u52a8\u64ad\u653e\u5e7f\u544a\uff09\uff0c\u9ed8\u8ba4\u7981\u6b62\u97f3\u9891\u6709\u58f0\u81ea\u52a8\u64ad\u653e<\/strong>\u3002<\/p>\n\n\n\n

\u89c4\u5219\u7b80\u5316\u5982\u4e0b\uff1a<\/p>\n\n\n\n

\u573a\u666f<\/th>\u81ea\u52a8\u64ad\u653e\u662f\u5426\u5141\u8bb8<\/th><\/tr><\/thead>
\u89c6\u9891 \u9759\u97f3<\/strong><\/td>\u2714 \u5141\u8bb8\uff08Chrome\u3001Safari\u3001\u5fae\u4fe1\u6d4f\u89c8\u5668\u90fd\u652f\u6301\uff09<\/td><\/tr>
\u97f3\u9891\uff08music\uff09<\/td>\u274c \u7981\u6b62\uff08\u5fc5\u987b\u7528\u6237\u4ea4\u4e92\uff09<\/td><\/tr>
\u7528\u6237\u4e0e\u9875\u9762\u4ea4\u4e92\u8fc7\uff08\u70b9\u51fb\/\u6ed1\u52a8\uff09<\/td>\u2714 \u53ef\u64ad\u653e<\/td><\/tr>
\u5fae\u4fe1\/QQ\/\u6296\u97f3\u6d4f\u89c8\u5668<\/td>\u9700\u8981\u7279\u6b8a\u4e8b\u4ef6\uff08WeixinJSBridgeReady \u7b49\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n

\ud83d\udd25 Part 1\uff1a\u89c6\u9891\u81ea\u52a8\u64ad\u653e\uff08\u6700\u7b80\u5355\u6700\u7a33\u5b9a\uff09<\/h1>\n\n\n\n

\u793a\u4f8b\uff1aHTML \u89c6\u9891\u81ea\u52a8\u64ad\u653e\uff08\u9759\u97f3 + \u81ea\u52a8\u64ad\u653e + \u5faa\u73af\uff09<\/h2>\n\n\n
\n&lt;video\n  id="myVideo"\n  src="video.mp4"\n  autoplay\n  muted\n  playsinline\n  webkit-playsinline\n  loop\n>&lt;\/video>\n\n<\/pre><\/div>\n\n\n
\u5173\u952e\u5c5e\u6027\u8bf4\u660e<\/h3>\n\n\n\n
\u5c5e\u6027<\/th>\u4f5c\u7528<\/th><\/tr><\/thead>
autoplay<\/code><\/td>\u81ea\u52a8\u64ad\u653e<\/td><\/tr>
muted<\/code><\/td>\u5fc5\u987b\u9759\u97f3<\/strong>\uff0c\u5426\u5219\u79fb\u52a8\u7aef\u4f1a\u62e6\u622a<\/td><\/tr>
playsinline<\/code><\/td>iOS \u5fae\u4fe1\/\u6296\u97f3\u4e2d\u907f\u514d\u5168\u5c4f\u64ad\u653e<\/td><\/tr>
webkit-playsinline<\/code><\/td>iOS \u517c\u5bb9\u5c5e\u6027<\/td><\/tr>
loop<\/code><\/td>\u5faa\u73af\u64ad\u653e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\ud83d\udc49 \u8fd9\u6bb5\u4ee3\u7801\u53ef\u5728 Android \/ iOS \/ \u5fae\u4fe1\u6d4f\u89c8\u5668 \/ \u6296\u97f3\u6d4f\u89c8\u5668 100% \u81ea\u52a8\u64ad\u653e<\/strong>\uff08\u89c6\u9891\u5fc5\u987b\u9759\u97f3\uff09\u3002<\/p>\n\n\n\n
\n\n\n\n
\ud83d\udd25 Part 2\uff1a\u97f3\u4e50\u81ea\u52a8\u64ad\u653e\uff08\u53d7\u9650\uff0c\u9700\u8981\u65b9\u6848\u7ed5\u8fc7\uff09<\/h1>\n\n\n\n
\u97f3\u4e50\uff08audio \u5143\u7d20\uff09\u7531\u4e8e\u662f\u6709\u58f0\u97f3\uff0c\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7981\u6b62\u81ea\u52a8\u64ad\u653e\u3002
\u5fc5\u987b\u901a\u8fc7 \u7528\u6237\u9996\u6b21\u89e6\u6478\u4e8b\u4ef6<\/strong> \u6216 \u7279\u5b9a\u6d4f\u89c8\u5668\u4e8b\u4ef6\uff08\u5982 WeixinJSBridgeReady\uff09<\/strong> \u624d\u80fd\u64ad\u653e\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2b50 \u65b9\u6848 A\uff1a\u7528\u6237\u70b9\u51fb\u540e\u7acb\u5373\u64ad\u653e\uff08\u901a\u7528\u65b9\u6848\uff09<\/h1>\n\n\n
\n&lt;audio id="bgm" src="music.mp3" preload="auto">&lt;\/audio>\n\n&lt;button onclick="document.getElementById('bgm').play();">\u70b9\u6211\u64ad\u653e\u97f3\u4e50&lt;\/button>\n\n<\/pre><\/div>\n\n\n
\u6700\u7a33\u59a5\uff0c\u9002\u5408\u4efb\u4f55 H5 \u573a\u666f\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2b50 \u65b9\u6848 B\uff1a\u5c1d\u8bd5\u81ea\u52a8\u64ad\u653e + \u7528\u6237\u4ea4\u4e92\u515c\u5e95\uff08\u63a8\u8350\uff09<\/h1>\n\n\n\n
\u9002\u7528\u4e8e\u666e\u901a\u6d4f\u89c8\u5668\uff08Chrome\/Safari\uff09\u4e0e App \u5185 Webview\u3002<\/p>\n\n\n
\n&lt;audio id="bgm" src="music.mp3" preload="auto">&lt;\/audio>\n\n&lt;script>\n  function tryPlay() {\n    const audio = document.getElementById("bgm");\n    audio.play().catch(() => {\n      \/\/ \u81ea\u52a8\u64ad\u653e\u5931\u8d25\uff0c\u7b49\u5f85\u7b2c\u4e00\u6b21\u89e6\u6478\n      document.addEventListener('touchstart', () => {\n        audio.play();\n      }, { once: true });\n    });\n  }\n\n  document.addEventListener("DOMContentLoaded", tryPlay);\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
\u2b50 \u65b9\u6848 C\uff1a\u5fae\u4fe1\u5185\u81ea\u52a8\u64ad\u653e\uff08\u516c\u4f17\u53f7\/H5 \u5fc5\u5907\uff09<\/h1>\n\n\n\n
\u5fae\u4fe1\u6d4f\u89c8\u5668\u5141\u8bb8\u5728\u4e8b\u4ef6 WeixinJSBridgeReady<\/code> \u4e2d\u64ad\u653e\u97f3\u9891\u3002<\/p>\n\n\n
\n&lt;audio id="bgm" src="music.mp3" preload="auto">&lt;\/audio>\n\n&lt;script>\n\/\/ \u5fae\u4fe1\u5185\u90e8\u4e13\u7528\ndocument.addEventListener("WeixinJSBridgeReady", function () {\n  document.getElementById('bgm').play();\n});\n\n\/\/ \u9875\u9762\u52a0\u8f7d\u5c1d\u8bd5\ndocument.addEventListener('DOMContentLoaded', function () {\n  document.getElementById('bgm').play();\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\ud83d\udc49 \u5fae\u4fe1\u5185\u7f6e JSBridge \u4f1a\u5f3a\u5236\u201c\u6388\u6743\u201d\uff0c\u4ece\u800c\u5141\u8bb8\u64ad\u653e\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2b50 \u65b9\u6848 D\uff1a\u6296\u97f3\/\u4eca\u65e5\u5934\u6761 Webview \u81ea\u52a8\u64ad\u653e<\/h1>\n\n\n\n
\u6296\u97f3\u6d4f\u89c8\u5668\u4e8b\u4ef6\uff1a<\/p>\n\n\n
\ndocument.addEventListener("ToutiaoJSBridgeReady", function () {\n  document.getElementById("bgm").play();\n});\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
\u2b50 \u65b9\u6848 E\uff1a\u4f7f\u7528\u9690\u85cf\u89c6\u9891\u5b9e\u73b0 BGM \u81ea\u52a8\u64ad\u653e\uff08\u9ed1\u79d1\u6280\uff0c\u53ef\u7528\u4f46\u4e0d\u63a8\u8350\uff09<\/h1>\n\n\n\n
\u56e0\u4e3a\u6d4f\u89c8\u5668\u5141\u8bb8 \u9759\u97f3\u89c6\u9891\u81ea\u52a8\u64ad\u653e<\/strong>\uff0c\u53ef\u7528 1px \u9759\u97f3\u89c6\u9891 hack \u81ea\u52a8\u6fc0\u6d3b\u97f3\u9891\uff1a<\/p>\n\n\n
\n&lt;video id="hackVideo" src="silent.mp4" autoplay muted playsinline>&lt;\/video>\n&lt;audio id="bgm" src="music.mp3">&lt;\/audio>\n\n&lt;script>\ndocument.getElementById('hackVideo').addEventListener('play', function(){\n  document.getElementById('bgm').play();\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\u4e0d\u63a8\u8350\u4f46\u786e\u5b9e\u6709\u6548\u3002<\/p>\n\n\n\n
\n\n\n\n
\ud83e\uddea \u7efc\u5408\u793a\u4f8b\uff1a\u517c\u5bb9\u79fb\u52a8\u7aef + \u5fae\u4fe1 + \u81ea\u52a8\u64ad\u653e\uff08\u4f60\u53ef\u4ee5\u76f4\u63a5\u7528\uff09<\/h1>\n\n\n
\n&lt;audio id="bgm" src="music.mp3" preload="auto">&lt;\/audio>\n\n&lt;script>\nvar bgm = document.getElementById("bgm");\n\n\/\/ 1) \u5c1d\u8bd5\u81ea\u52a8\u64ad\u653e\nfunction autoPlay(){\n  bgm.play().catch(err => {\n    \/\/ 2) \u81ea\u52a8\u64ad\u653e\u5931\u8d25 \u2192 \u76d1\u542c\u7528\u6237\u7b2c\u4e00\u6b21\u70b9\u51fb\n    document.addEventListener("touchstart", function(){\n      bgm.play();\n    }, { once: true });\n  });\n}\n\n\/\/ 3) \u7f51\u9875\u52a0\u8f7d\u5b8c\u6210\u5c1d\u8bd5\ndocument.addEventListener("DOMContentLoaded", autoPlay);\n\n\/\/ 4) \u5fae\u4fe1\u6d4f\u89c8\u5668\u5185\u90e8\u4e8b\u4ef6\ndocument.addEventListener("WeixinJSBridgeReady", function(){\n  bgm.play();\n});\ndocument.addEventListener("YixinJSBridgeReady", function(){\n  bgm.play();\n});\n\n\/\/ 5) \u6296\u97f3\/\u5934\u6761\u6d4f\u89c8\u5668\u5185\u90e8\u4e8b\u4ef6\ndocument.addEventListener("ToutiaoJSBridgeReady", function(){\n  bgm.play();\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\u2714 \u666e\u901a\u6d4f\u89c8\u5668\u53ef\u64ad\u653e
\u2714 \u5fae\u4fe1\u6d4f\u89c8\u5668\u53ef\u64ad\u653e
\u2714 \u6296\u97f3\/\u5934\u6761\u4e5f\u53ef\u64ad\u653e
\u2714 \u7528\u6237\u884c\u4e3a\u515c\u5e95
\u2714 \u5168\u8bbe\u5907\u517c\u5bb9\u5ea6\u6700\u9ad8<\/p>\n\n\n\n
\n\n\n\n
\ud83d\udccc \u89c6\u9891\u81ea\u52a8\u64ad\u653e\u548c\u97f3\u4e50\u81ea\u52a8\u64ad\u653e\u533a\u522b\u603b\u7ed3<\/h1>\n\n\n\n
\u7c7b\u578b<\/th>\u684c\u9762\u7aef<\/th>\u79fb\u52a8\u7aef<\/th>\u6ce8\u91ca<\/th><\/tr><\/thead>
\u89c6\u9891\u9759\u97f3\uff08muted\uff09<\/td>\u2714 \u81ea\u52a8\u64ad\u653e<\/td>\u2714 \u81ea\u52a8\u64ad\u653e<\/td>\u6700\u63a8\u8350<\/td><\/tr>
\u89c6\u9891\u6709\u58f0\u97f3<\/td>\u274c \u6709\u65f6\u80fd\u64ad<\/td>\u274c \u5927\u90e8\u5206\u4f1a\u62e6\u622a<\/td>\u9664\u975e\u7528\u6237\u64cd\u4f5c<\/td><\/tr>
\u97f3\u4e50\uff08audio\uff09<\/td>\u274c \u5927\u591a\u6570\u7981\u6b62<\/td>\u274c \u5fc5\u987b\u7528\u6237\u89e6\u53d1<\/td>\u9700 JSBridge \u6216\u4e8b\u4ef6\u89e6\u53d1<\/td><\/tr>
\u5fae\u4fe1\u3001\u6296\u97f3\u6d4f\u89c8\u5668<\/td>\u274c \u9ed8\u8ba4\u7981\u6b62<\/td>\u26a0 \u901a\u8fc7\u4e8b\u4ef6\u53ef\u4ee5\u81ea\u52a8\u64ad\u653e<\/td>WeixinJSBridgeReady<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u4e0b\u9762\u4e00\u6b21\u6027\u7ed9\u4f60 \u201c\u5168\u90e8\u201d<\/strong> \u2014\u2014\u628a\u4f60\u524d\u9762\u4f9d\u6b21\u63d0\u5230\u7684\u6240\u6709 HTML5 \/ H5 \u6280\u672f\u70b9 \u5b8c\u6574\u6574\u7406<\/strong> \u6210\u4e00\u4efd\u8d85\u6e05\u6670\u3001\u53ef\u76f4\u63a5\u7528\u7684\u5408\u96c6\u3002
\u6db5\u76d6\uff1a<\/p>\n\n\n\n
    \n
  1. HTML5 \u89c6\u9891\u500d\u901f\u64ad\u653e<\/strong><\/li>\n\n\n\n
  2. HTML5 Web Worker\uff08\u591a\u7ebf\u7a0b\uff09<\/strong><\/li>\n\n\n\n
  3. \u77ed\u89c6\u9891\u6ed1\u52a8\u64ad\u653e\uff08H5 \u6296\u97f3\u5f0f\uff09<\/strong><\/li>\n\n\n\n
  4. \u4f7f\u7528 HBuilder \u5236\u4f5c\u7b80\u5355 H5 \u9875\u9762<\/strong><\/li>\n\n\n\n
  5. HTML5+\uff08UniApp \/ H5+\uff09 \u4e2d plus.io \u62cd\u7167\u4e0e\u9009\u62e9\u56fe\u7247<\/strong><\/li>\n\n\n\n
  6. HTML5 \u9ad8\u5ea6\u584c\u9677\u95ee\u9898\u89e3\u51b3\u65b9\u6848<\/strong><\/li>\n\n\n\n
  7. HTML5 \u97f3\u4e50\/\u89c6\u9891\u81ea\u52a8\u64ad\u653e\u89e3\u51b3\u65b9\u6848\uff08\u542b\u79fb\u52a8\u7aef\u9650\u5236\u5904\u7406\uff09<\/strong><\/li>\n<\/ol>\n\n\n\n
    \u6240\u6709\u793a\u4f8b\u4ee3\u7801\u5168\u90e8\u53ef\u7528\uff0c\u9002\u5408 H5 \/ uni-app \/ HybridApp \/ \u5c0f\u7a0b\u5e8f WebView \u7b49\u73af\u5883\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u2460 HTML5 \u89c6\u9891\u64ad\u653e\u5668\u5b9e\u73b0\u500d\u901f\u64ad\u653e<\/strong><\/h1>\n\n\n
    \n&lt;video id="video" width="300" controls>\n  &lt;source src="test.mp4" type="video\/mp4">\n&lt;\/video>\n\n&lt;button onclick="setRate(0.5)">0.5x&lt;\/button>\n&lt;button onclick="setRate(1)">1x&lt;\/button>\n&lt;button onclick="setRate(1.5)">1.5x&lt;\/button>\n&lt;button onclick="setRate(2)">2x&lt;\/button>\n\n&lt;script>\nfunction setRate(rate) {\n  document.getElementById('video').playbackRate = rate;\n}\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    \u2461 HTML5 Web Worker\uff08\u524d\u7aef\u591a\u7ebf\u7a0b\uff09<\/strong><\/h1>\n\n\n\n
    1. \u4e3b\u7ebf\u7a0b main.js<\/strong><\/h3>\n\n\n
    \nvar worker = new Worker('worker.js');\n\nworker.postMessage(100000);\n\nworker.onmessage = function (e) {\n  console.log('\u540e\u53f0\u8ba1\u7b97\u7ed3\u679c\uff1a', e.data);\n};\n\n<\/pre><\/div>\n\n\n
    2. worker.js\uff08\u5b50\u7ebf\u7a0b\uff09<\/strong><\/h3>\n\n\n
    \nonmessage = function (e) {\n  let sum = 0;\n  for (let i = 0; i &lt; e.data; i++) sum += i;\n  postMessage(sum);\n};\n\n<\/pre><\/div>\n\n\n
    \u7279\u70b9\uff1a<\/p>\n\n\n\n