autoplay 相关问题

在 HTML5 中顺序播放音频文件

如何使用PHP顺序播放音频文件？ 我有多个音频文件，我想顺序播放而不是同时播放。我正在使用类似于以下的代码： 如何使用PHP顺序播放音频文件？ 我有多个音频文件，我想顺序播放而不是同时播放。我正在使用类似于以下的代码： <audio controls autoplay='true'> <source src="sample1.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <audio controls autoplay='true'> <source src="sample2.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> 我需要在 sample1 播放完毕后 5 秒播放 sample2。在这两种情况下都不应涉及用户交互。 更新 我认为这应该像使用连续函数调用一样简单，但这不起作用。我开始使用下面的示例代码来研究和使用 sleep() 函数： print "<br>Line1"; sleep(10); print "<br>Line2"; 这只会将整个脚本延迟 10 秒并打印两条语句，而不是一个接一个地打印。音频文件也是如此，这也是我最终要解决的问题。 在尝试了几篇文章后，我发现这对我有用 var audionameslist = ` audiolib/1.mp3, audiolib/2.mp3, audiolib/3.mp3 `; var audionamesarray = audionameslist.split(','); var audio = new Audio(audionamesarray[0]); audio.src=audionamesarray[0]; audio.play(); index=1; audio.onended = function() { if(index < audionamesarray.length){ audio.src=audionamesarray[index]; audio.play(); index++; } }; 这个问题之前已经回答过了。 您不需要任何 PHP，一切都在 HTML5 API 中。 玩家已结束事件ended。只需在结束后更改 src 属性即可。 然后该元素将加载“下一首歌曲”。 看这里 仅供参考：我刚刚复制了你的标题并在谷歌中搜索了它，瞧！我发现了这个问题... 只是我的愿景... <script> /** * Play audios one by one */ (function () { var itemList = document.getElementsByTagName('audio'); var eventHandler = function (e) { if (itemList[this.nextToPlay]) itemList[this.nextToPlay].play(); }; for (var i = 0; i < itemList.length; i++) { if (itemList[i + 1]) itemList[i].nextToPlay = i + 1; itemList[i].addEventListener('ended', eventHandler, false); } })(); </script> 您可以创建一个如下所示的小型 JS。只需将音频元素 ID 传递给该函数，它就会按顺序播放。谢谢你，祝一切顺利。 function playAll(audioidlist) { var audioarray = audioidlist.split(','); for (var i = 0; i < audioarray.length; i++) { var audio = document.getElementById(audioarray[i]); audio.play(); while (!audio.ended) { } } }

如何阻止 iframe 中嵌入的 Dailymotion 视频自动播放？

我正在尝试以某种方式嵌入 Dailymotion 视频（不是我自己的），该方式可以访问 Dailymotion 的新 2021 平台 API，并且加载时不会自动播放。 <p>我正在尝试以一种可以访问 Dailymotion 的新 2021 <a href="https://developers.dailymotion.com/guides/getting-started-with-web-sdk/#embed-methods" rel="nofollow noreferrer">平台 API</a> 的方式嵌入 Dailymotion 视频（不是我自己的），并且加载时不会自动播放。</p> <pre><code>&lt;script src=&#34;https://geo.dailymotion.com/libs/player.js&#34;&gt;&lt;/script&gt; &lt;div id=&#34;video&#34;&gt;&lt;/div&gt; &lt;script&gt; dailymotion .createPlayer(&#39;video&#39;, { video: &#39;x7tgad0&#39;, params: { startTime: 0 }, }) .then((player) =&gt; { //log player object to console console.log({player}); //add listener to timechange event from the Dailymotion Platform API player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) =&gt; console.log(state.videoTime)); }); &lt;/script&gt; </code></pre> <p>JSF 在这里： <a href="https://jsfiddle.net/Esn024/egrLb1tc/12/" rel="nofollow noreferrer">https://jsfiddle.net/Esn024/egrLb1tc/12/</a></p> <p>上面的代码将 <pre><code>&lt;div id=&#34;video&#34;&gt;&lt;/div&gt;</code></pre> 转换为：</p> <pre><code>&lt;div id=&#34;video&#34; class=&#34;dailymotion-player-root dailymotion-player-default&#34; style=&#34;background: rgb(13, 13, 13); padding-bottom: 75%; position: relative;&#34;&gt; &lt;div class=&#34;dailymotion-player-wrapper&#34; style=&#34;height: 100%; overflow: hidden; position: absolute; width: 100%; margin: 1e-05px;&#34;&gt; &lt;iframe allow=&#34;autoplay; fullscreen; picture-in-picture; web-share&#34; class=&#34;dailymotion-player&#34; frameborder=&#34;0&#34; src=&#34;https://geo.dailymotion.com/player.html?video=x7tgad0&amp;amp;startTime=0&#34; title=&#34;Dailymotion video player&#34; height=&#34;100%&#34; width=&#34;100%&#34; style=&#34;opacity: 1;&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>它添加了默认自动播放的嵌入式 Dailymotion 视频（注意：正如我发现的，如果将上述代码保存到 .html 文件并通过双击打开它，它不会自动播放，可能是因为浏览器对打开的文件的行为不同来自文件系统，但如果在服务器中打开相同的 .html 文件，它将自动播放）。</p> <p>我想，如果我从 iframe 的“允许”属性中删除“自动播放”，也许我可以阻止它自动播放，基于 6 年前关于他们旧 API 的 StackOverflow 问题<a href="https://stackoverflow.com/questions/48404657/how-can-i-disable-autoplay-video-in-iframe-dailymotion">，所以我将以下代码添加到</a><code>.then()</code><pre>块：</pre> </p><code>const iframeNode = player.getRootNode().childNodes[0].childNodes[0]; iframeNode.setAttribute(&#34;allow&#34;, &#34;fullscreen; picture-in-picture; web-share&#34;); iframeNode.replaceWith(iframeNode); console.log({iframeNode}); </code><pre> </pre>修改了“允许”属性以删除“自动播放”并重新加载视频，但它仍然会自动播放。<p> </p>我还尝试将播放器设置中的<p><code>autostart</code><pre>属性从</pre><code>firstTimeViewable</code><pre>修改为</pre><code>off</code><pre>，但这也不起作用（至少不是我下面尝试的方式，而且我无法理解任何其他方式来更改设置）：</pre> </p><code>player._do_not_use_e5dbad3203d413f04bf4.settings.autostart = &#39;off&#39;; </code><pre> </pre>我想这与官方文档一致，其中<p>说<a href="https://developers.dailymotion.com/guides/getting-started-with-web-sdk/#getting-started" rel="nofollow noreferrer">一些播放器设置无法在运行时更改：“播放器配置由多个在运行时无法修改或覆盖的设置组成。这些设置可以只能通过 Dailymotion Studio 中的播放器配置器或平台 API 进行更新。”</a> </p>某些其他设置在 <p><code>player</code><pre> 对象中具有可以在事后更改它们的方法，例如 </pre><code>setAspectRatio</code><pre>、</pre><code>setVolume</code><pre> 和其他一些设置 - 但没有 </pre><code>setAutoplay</code><pre>/</pre><code>setAutostart</code><pre>。</pre> </p>Dailymotion 在 2021 年推出了新的播放器嵌入系统，但旧的 API 直到大约一个月前才继续工作。 <p>迁移指南<a href="https://faq.dailymotion.com/hc/en-us/articles/4420076686226-Migrate-to-the-Player-Embed" rel="nofollow noreferrer">似乎说自动播放有3个设置 - “打开”，“关闭”，“firstTimeViewable”，可以从“Dailymotion Studio”中设置（我认为只有付费帐户才可用）。据我所知，他们的在线指南似乎假设嵌入视频的任何人都拥有付费的 Dailymotion 帐户，并且只会嵌入来自自己频道的视频 - 例如请参阅他们的</a>Web SDK 入门<a href="https://developers.dailymotion.com/guides/getting-started-with-web-sdk/#getting-started" rel="nofollow noreferrer">页面，该页面指导用户“创建与您的 Dailymotion 帐户关联并由唯一的播放器 ID 标识的自定义播放器配置”。但似乎这实际上并不是强制性的，因为文档还说“如果玩家 ID 指定不正确或不再存在，配置将回退到默认库配置。”</a> </p>我现在决定的临时解决方案是在视频第一次开始播放时暂停视频（见下文），但我想找到一种方法，在单击之前根本不开始加载视频：<p> </p><code>&lt;script src=&#34;https://geo.dailymotion.com/libs/player.js&#34;&gt;&lt;/script&gt; &lt;div id=&#34;video&#34;&gt;&lt;/div&gt; &lt;script&gt; let pausePlayer = true; dailymotion .createPlayer(&#39;video&#39;, { video: &#39;x7tgad0&#39;, params: { startTime: 0 }, }) .then((player) =&gt; { //log player object to console console.log({player}); //add listener to timechange event from the Dailymotion Platform API player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) =&gt; { if (pausePlayer) { player.pause(); pausePlayer = false; } console.log(state.videoTime); }); }); </code><pre> </pre> </question> <answer tick="false" vote="0">受到 elias-berg 上面建议的启发，这里有一个解决方案，它加载预览图像 + 模仿非自动播放 Dailymotion 播放器的按钮： <p>https://jsfiddle.net/Esn024/egrLb1tc/37/<a href="https://jsfiddle.net/Esn024/egrLb1tc/37/" rel="nofollow noreferrer"></a> </p>它可能可以做得更简单，但我只是在视频开始自动播放之前从 Dailymotion 屏幕复制了大部分 HTML 和 CSS（进行了一些更改），然后将其添加到 loadDailymotionPreviewDiv() 函数中，该函数在页面第一次运行时运行负载。<p> </p>当用户单击中间的按钮时，它会触发 loadVideo() 函数，该函数会创建 Dailymotion 播放器，并开始自动播放视频。默认情况下，它开始静音播放，所以我还必须在其中添加一个 <p><code>player.setMute(false);</code><pre>。</pre> </p><code>&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;script src=&#34;https://geo.dailymotion.com/libs/player.js&#34;&gt;&lt;/script&gt; &lt;style&gt; .player { display: flex; justify-content: center; width: 480px; height: 360px; background-color: black; position: relative; } .gradient { position: absolute; transition: opacity 200ms ease-in-out; pointer-events: none; background: linear-gradient(180deg,rgba(13,13,13,.6)0,rgba(13,13,13,.2) 20%,rgba(13,13,13,.2) 80%,rgba(13,13,13,.6) 100%); left: 0; bottom: 0; right: 0; top: 0; } .video_poster { height: 100%; width: 100%; position: absolute; background-color: #0d0d0d; } .video_poster_image { object-fit: cover; height: 100%; width: 100%; } .play_screen { height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .layout { display: flex; flex-direction: column; height: 100%; } .layout_top, .layout_bottom { align-items: center; display: flex; flex-direction: row; height: 3rem; height: clamp(48px,3rem,51px); position: relative; z-index: 1; width: 100%; } .layout_top_left { height: 100%; margin: 0 1rem; min-width: 0; } .layout_title { display: block; margin-top: 12px; } .video_title_link { text-decoration: none; } .layout_title .title { color: #fff; font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; height: 1.5rem; line-height: 1.5rem; } .video_owner { color: #fff; font-size: .875rem; line-height: 1.25rem; } .video_owner_link { color: #fff; text-decoration: none; } .layout_middle { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-grow: 1; } .play_screen .layout_bottom { justify-content: center; } .button_watch_onsite { align-items: center; background: 0 0; border: 0; border-radius: 1.5rem; color: #fff; cursor: pointer; display: flex; font-weight: 400; height: 2.5rem; padding: 0 0.75rem; } .button_watch_onsite-text { font-size: .875rem; font-style: italic; line-height: 1.5rem; margin-right: 0.375rem; text-transform: lowercase; text-decoration:none; } .button_watch_onsite .brand_wordmark { height: 0.75rem; margin-top: -0.0625rem; } .play_screen_content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .button_play { border-radius: 6.25rem; background: 0 0; color: #fff; display: block; cursor: pointer; font-variant-numeric: tabular-nums; padding: 0.125rem; } .button_play_content { background-color: rgba(13,13,13,.6); display: flex; align-items: center; border-radius: 6.25rem; } .button_play_left { display: flex; align-items: center; justify-content: center; height: 64px; width: 64px; } .button_play { border-radius: 6.25rem; background: 0 0; color: #fff; display: block; cursor: pointer; font-variant-numeric: tabular-nums; padding: 0.125rem; } .button_play_right { display: block; line-height: 1; padding-right: 1.5rem; font-size: .875rem; text-transform: uppercase; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;video&#34;&gt;&lt;/div&gt; &lt;script&gt; const videoId = &#39;x7tgad0&#39;; const videoDiv = document.getElementById(&#39;video&#39;); const loadVideoButton = document.getElementById(&#39;loadVideo&#39;); //https://stackoverflow.com/a/61335543/14926023 function secondsToTime(e){ const h = Math.floor(e / 3600).toString().padStart(2,&#39;0&#39;), m = Math.floor(e % 3600 / 60).toString().padStart(2,&#39;0&#39;), s = Math.floor(e % 60).toString().padStart(2,&#39;0&#39;); return h + &#39;:&#39; + m + &#39;:&#39; + s; //return `${h}:${m}:${s}`; } function loadDailymotionPreviewDiv(videoId, videoDiv) { fetch(`https://api.dailymotion.com/video/${videoId}?fields=thumbnail_360_url,title,duration,owner.username`) .then(res =&gt; res.json()) .then((json) =&gt; { console.log({json}); const imgSrc = json.thumbnail_360_url; const title = json.title; const time = secondsToTime(json.duration); const username = json[&#39;owner.username&#39;]; const overlayHtml = ` &lt;div class=&#34;player&#34;&gt; &lt;div class=&#34;video_poster&#34;&gt;&lt;img class=&#34;video_poster_image&#34; src=&#34;${imgSrc}&#34; alt=&#34;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;gradient&#34; style=&#34;opacity: 1;&#34;&gt;&lt;/div&gt; &lt;div class=&#34;play_screen&#34;&gt; &lt;div class=&#34;play_screen_backdrop&#34; role=&#34;button&#34; tabindex=&#34;0&#34;&gt;&lt;/div&gt; &lt;div class=&#34;layout&#34;&gt; &lt;div class=&#34;layout_top&#34;&gt; &lt;div class=&#34;layout_top_left&#34;&gt; &lt;div class=&#34;layout_title&#34;&gt; &lt;a class=&#34;video_title_link&#34; href=&#34;https://www.dailymotion.com/video/${videoId}&#34; target=&#34;_blank&#34;&gt; &lt;div class=&#34;title&#34;&gt;${title}&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&#34;layout_signature&#34;&gt; &lt;div class=&#34;video_owner&#34;&gt; &lt;a class=&#34;video_owner_link&#34; href=&#34;https://www.dailymotion.com/${username}&#34; target=&#34;_blank&#34;&gt;${username}&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;layout_middle&#34;&gt;&lt;/div&gt; &lt;div class=&#34;layout_bottom&#34;&gt; &lt;button class=&#34;button_watch_onsite&#34; onclick=&#34;window.open(&#39;https://www.dailymotion.com/video/${videoId}&#39;,&#39;_blank&#39;)&#34; type=&#34;button&#34;&gt; &lt;div class=&#34;button_watch_onsite-text&#34;&gt;Watch on&lt;/div&gt; &lt;svg class=&#34;brand_wordmark&#34; aria-hidden=&#34;true&#34; viewBox=&#34;0 0 131 20&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; aria-labelledby=&#34;logo-alt-text&#34; role=&#34;img&#34;&gt; &lt;title id=&#34;logo-alt-text&#34;&gt;Dailymotion&lt;/title&gt; &lt;path fill=&#34;currentColor&#34; d=&#34;M26.815 19.657h-2.39l4.53-19.33h2.366l-4.504 19.33h-.002ZM37.933 19.657H29.95L34.513.327h2.39l-4.057 17.166h5.587l-.5 2.164ZM44.193 12.182l-1.725 7.475h-2.42l1.752-7.531-1.333-11.8h2.42l.695 9.42L48.78.326h2.697l-7.285 11.856ZM97.724 2.49H94.22l-3.785 17.167h-2.42L91.8 2.49h-3.837l.53-2.163h9.76l-.529 2.163ZM97.646 19.657h-2.143L99.788.327h2.363l-4.255 19.33h-.25ZM113.266 5.764l-2.113 9.485c-.287 1.343-.688 2.303-1.208 2.987-.791 1.07-2.088 1.591-3.842 1.591-2.893 0-4.551-1.262-4.583-3.426-.01-.63.067-1.206.3-2.246l2.113-9.484c.702-3.21 2.35-4.664 5.216-4.664 2.865 0 4.357 1.316 4.389 3.509.01.63-.066 1.288-.274 2.246h.002v.002Zm-4.226-3.727c-.834 0-1.47.273-1.905.82-.357.44-.54 1.014-.805 2.138l-2.113 9.538c-.131.575-.205 1.123-.2 1.535.017 1.152.777 1.78 2.083 1.78 1.391 0 2.131-.793 2.574-2.767l2.14-9.429c.208-.933.287-1.371.28-1.81-.018-1.18-.75-1.81-2.059-1.81h.002l.003.005ZM53.33.347h4.007l1.1 11.083c.199 2.136.31 3.861.454 6.195h.057a91.22 91.22 0 0 1 2.764-6.195L67.18.347h4.063l-2.17 19.303H66.42l1.384-11.526c.254-2.084.537-3.862.876-5.999l-.057-.029c-.96 2.083-1.807 3.915-2.849 6.028L60.19 19.65h-3.415L55.704 8.124a221.94 221.94 0 0 1-.48-5.999h-.055a129.08 129.08 0 0 1-1.524 5.999L50.542 19.65h-2.68L53.331.347ZM87.087 9.987C85.654 17.4 82.537 20 77.62 20c-3.878 0-6.013-1.66-6.013-5.92 0-1.274.139-2.52.45-4.067C73.547 2.602 76.61 0 81.554 0c3.848 0 6.013 1.66 6.013 5.92 0 1.275-.168 2.52-.478 4.067h-.002Zm-5.845-7.938c-3.202 0-5.364 2.076-6.544 8.02-.31 1.382-.478 2.739-.478 3.847 0 2.875 1.235 4.037 3.68 4.037 3.231 0 5.364-2.075 6.574-8.02.282-1.381.477-2.738.477-3.847 0-2.85-1.234-4.037-3.709-4.037ZM8.49.322c-.458 0-4.464.066-4.464.066L0 19.688h1.898v-.002c1.081-.01 1.482.012 2.539.012 4.936 0 8.061-2.215 9.499-9.604h.002c.31-1.542.48-2.782.48-4.052 0-4.249-2.063-5.72-5.928-5.72Zm3.036 9.765c-1.215 5.925-3.16 7.28-6.404 7.297-1.133.004-1.39-.005-2.25-.018L5.954 2.473v.005c.965-.022 1.193-.032 2.079-.022 2.484.022 3.974.96 3.974 3.8 0 1.104-.196 2.457-.478 3.833l-.002-.002ZM127.766.322l-3.825 17.315L121.1.322h-3.998l-4.348 19.342h2.514l3.823-17.612 2.818 17.612h3.957L130.189.322h-2.423ZM20.728.328l-7.953 19.33h2.557l1.447-3.613.918-2.244.324-.867h2.682l-.086.867-.196 2.246-.277 3.614h2.42l1.5-19.333h-3.338.002ZM18.87 10.661l3.08-8.579-1.014 8.579H18.87Z&#34;&gt;&lt;/path&gt; &lt;/svg&gt; &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;play_screen_content&#34;&gt; &lt;button class=&#34;button_play&#34; aria-label=&#34;Playback, ${time}&#34;&gt; &lt;span class=&#34;button_play_content&#34;&gt; &lt;span class=&#34;button_play_left&#34; style=&#34;padding: 8px;&#34;&gt; &lt;svg viewBox=&#34;0 0 24 24&#34; aria-hidden=&#34;true&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt; &lt;path d=&#34;M8.56047 5.09337C8.34001 4.9668 8.07015 4.96875 7.85254 5.10019C7.63398 5.23162 7.5 5.47113 7.5 5.73011L7.5 18.2698C7.5 18.5298 7.63398 18.7693 7.85254 18.9007C7.96372 18.9669 8.0882 19 8.21268 19C8.33241 19 8.45309 18.9688 8.56047 18.9075L18.1351 12.6377C18.3603 12.5082 18.5 12.2648 18.5 12C18.5 11.7361 18.3603 11.4917 18.1351 11.3632L8.56047 5.09337Z&#34; fill=&#34;currentColor&#34;&gt;&lt;/path&gt; &lt;/svg&gt; &lt;/span&gt; &lt;span class=&#34;button_play_right&#34;&gt;${time}&lt;/span&gt; &lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;`; videoDiv.innerHTML = overlayHtml; const playContentButton = document.querySelector(&#39;#video .button_play&#39;); playContentButton.addEventListener(&#39;click&#39;, () =&gt; { loadVideo(videoId, videoDiv); }); }); } function loadVideo(videoId) { dailymotion .createPlayer(&#39;video&#39;, { video: videoId, params: { startTime: 0 }, }) .then((player) =&gt; { console.log({player}); player.setMute(false); player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) =&gt; {console.log(state.videoTime);}); }); } loadDailymotionPreviewDiv(videoId, videoDiv); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code><pre> </pre> </answer></body>

有没有办法自动播放 Instagram 卷轴嵌入？

<question vote="0"> <pre><code>&lt;iframe id=&#34;instagramEmbed&#34; src=&#34;https://www.instagram.com/reel/C6zTuu3s6MB/embed/&#34; scrolling=&#34;no&#34; allowtransparency=&#34;true&#34; allowfullscreen=&#34;true&#34; frameborder=&#34;0&#34; width=&#34;300&#34; height=&#34;600&#34; play&gt;Iframe not supported&lt;/iframe&gt; </code></pre> <p>我想自动播放这个卷轴有办法吗？</p> <p>我尝试将自动播放或类似的东西放入 iframe 中，但它不起作用。</p> </question> <answer tick="false" vote="0"> <p>你可以这样做：</p> <pre><code>document.getElementById(&#34;instagramEmbed&#34;).onload = function(e) {autoPlay(e)}; </code></pre> <p>然后在自动播放功能中，您可以在带有播放按钮的子元素上添加<pre><code>.click()</code></pre>。</p> </answer> </body></html>

当用户与页面交互时是否有一个事件可以检测？

我正在尝试在用户与页面交互后立即自动播放视频。如果我之前播放视频，显然会出现安全错误： 未捕获（承诺中）DOMException：play() 失败，因为...

修复 HTML 自动播放问题。不适用于 JS 或应用静音属性时

我几个月来一直在尝试向我的网站添加背景音乐，它曾经可以使用 iframe 并嵌入 YouTube，但现在不再自动播放。 我早上一直在查这个问题...

即使使用静音属性，html 和 js 的自动播放也不起作用

我几个月来一直在尝试在我的网站上添加背景音乐广告，它曾经可以使用 iframe 并嵌入 YouTube，但现在不再自动播放了。 我整个早上都在查这个问题......

使用 Ruffle 自动播放嵌入的 swf

我正在使用 Ruffle 将我的旧版 swf 转换为我的博客。我使用的代码运行良好，但我想让 swf 在加载时自动播放。你能帮助我吗？谢谢。 <p>我正在使用 Ruffle 将我的旧版 swf 转换为我的博客。我使用的代码运行良好，但我想让 swf 在加载时自动播放。你能帮助我吗？谢谢。</p> <pre><code>&lt;script src=&#34;https://www.sinapsi.org/public/ruffle/ruffle.js&#34;&gt;&lt;/script&gt; &lt;object width=&#34;750&#34; height=&#34;550&#34;&gt; &lt;param name=&#34;movie&#34; value=&#34;https://www.sinapsi.org/public/espressione01.swf&#34;&gt; &lt;embed src=&#34;https://www.sinapsi.org/public/espressione01.swf&#34;&gt; &lt;/embed&gt; &lt;/object&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>谢谢，但我宁愿不碰 ruffle.js。我按照另一位用户的建议使用这些行：</p> <pre><code>&lt;script&gt; window.RufflePlayer = window.RufflePlayer || {}; window.RufflePlayer.config = { &#34;warnOnUnsupportedContent&#34;: false, &#34;autoplay&#34;: &#34;on&#34;, &#34;unmuteOverlay&#34;: &#34;hidden&#34; }; &lt;/script&gt; &lt;script src=&#34;https://www.sinapsi.org/public/ruffle/ruffle.js&#34;&gt;&lt;/script&gt; &lt;object width=&#34;750&#34; height=&#34;550&#34;&gt; &lt;param name=&#34;movie&#34; value=&#34;https://www.sinapsi.org/public/mygame.swf&#34; /&gt; &lt;embed src=&#34;https://www.sinapsi.org/public/mygame.swf&#34; /&gt; &lt;/object&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>我昨天刚刚解决了这个问题！ 您可以向褶边添加许多配置，但文档不太容易理解（或查找！）。 打开 ruffle.js 文件并添加：</p> <pre><code>window.RufflePlayer = window.RufflePlayer || {}; window.RufflePlayer.config = { &#34;autoplay&#34;: &#34;on&#34;, &#34;splashScreen&#34;: false, &#34;unmuteOverlay&#34;:&#34;hidden&#34;, }; </code></pre> <p>如果您在所有网页上调用 ruffle，那么 swf 将自动播放。</p> </answer> </body></html>

为什么在 React js 的 Swiper 中自动播放不起作用？

我正在为我的项目卡构建一个自动播放滑动器，它会在鼠标悬停时暂停。滑动功能工作正常，但自动播放不起作用。 进口： 从“swi...

如何使用 javascript 检测 gif 何时播放过一次？

我想知道是否可以使用 javascript 检测 gif 何时到达其循环点，以模拟 Flash 内容的预加载器 目前，我有一个脚本来检测视频何时

您可以在 Safari 中自动播放有声视频吗？

我正在开发一个登陆页面，需要在视频滚动到视图中时使元素自动播放声音。 浏览器对此非常严格（这是可以理解的，因为它可能会毁掉你......

Swiper 轮播上的自动播放在 React Native 中不起作用

我正在尝试在刷卡器上实现自动播放，但它似乎不起作用，有人知道如何修复它吗？代码是 TSX 我正在使用 React Native。 对于那些想知道我在做什么的人，...

React Native TSX：Swiper 上的自动播放不起作用

您好，我正在尝试在刷卡器上实现自动播放，但它似乎不起作用， 有谁知道如何修理它？代码是 TSX 我正在使用 React Native。 对于那些想知道我在做什么的人...

如何使用 autopy 来按下键盘上的字符？

“我想按‘C’键和控制按钮来复制一些东西，但我不知道怎么写。我尝试了这段代码，‘autopy.key.toggle(autopy.key.Code. C，True)，还有这段代码，“a...

嵌入的 YouTube 视频不会自动播放音频

在查看了有关嵌入视频的其他帖子但无助于解决我的问题后，我寻求一些建议，以便在访问页面时使视频与音频一起自动播放。下面是代码

Angular HTML 全屏视频自动播放不起作用

谁能解释一下为什么这个自动播放视频在 Chrome 中不起作用？ 视频存储在 firebase 存储中。当您访问页面然后返回主页时它会播放，但当您第一次访问时不会...

如何使用 php 关闭或打开 Swiper 自动播放并动态更改延迟？虽然我想创建一个自定义 Elementor 小部件

我正在尝试为自定义 Elementor 小部件动态更改滑动幻灯片的自动播放参数。我尝试将字符串作为 swiper 类中的对象动态传递。但这不起作用。 (

使用 javascript 自动播放滑块

我要求制作一个自动播放滑块，但在学习了 javascript 之后...我仍然不知道如何应用我所学到的知识...需要一些帮助.. 我被要求制作一个自动播放滑块来改变滑动...

同一页面上存在多个 javascript 幻灯片的问题

我正在尝试制作多个幻灯片以使用同一段 JavaScript 代码。 这是我的 HTML 代码： 我正在尝试使用同一段 JavaScript 代码制作多个幻灯片。 这是我的 HTML 代码： <div class="slider-container"> <div class="slider"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> <div class="slider"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> </div> 这是主要的CSS： .slider-container{ width:50%; } .slider{ width:100%; position:relative; padding-bottom:75%; /* aspect-ratio 4/3 */ } .slide{ width:100%; position:absolute; top:0; left:0; opacity:0; transition:opacity 0.5s ease-in; } .slide:first-child{ opacity:1; } 这是 javascript : const sliderContainer = document.querySelector(".slider-container"); const slide = sliderContainer.querySelectorAll(".slide"); let currentSlide = 0; function changeSlide() { slide[currentSlide].style.opacity = 0; currentSlide = (currentSlide + 1) % slide.length; slide[currentSlide].style.opacity = 1; } function startSlider() { intervalId = setInterval(changeSlide, 2000); } function stopSlider() { clearInterval(intervalId); } startSlider(); sliderContainer.addEventListener("mouseenter", stopSlider); sliderContainer.addEventListener("mouseleave", startSlider); 此 JavaScript 对于一张幻灯片效果很好，但我无法在同一页面上显示多个幻灯片。理想情况下，我希望为所有幻灯片保留相同的类，并且显然使进入/离开鼠标事件对每个幻灯片单独工作。有什么帮助吗？ 要处理一个页面上具有独立行为的多个滑块，您需要调整 JS 代码以分别处理每个滑块。 实现此目的的一种方法是将每个滑块的功能封装在一个函数中，然后为每个滑块创建实例。 这是您的代码： html: <div class="slider-container"> <div class="slider" id="slider1"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> <div class="slider" id="slider2"> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> <div class="slide">...</div> </div> </div> javascript: function createSlider(sliderId) { const sliderContainer = document.getElementById(sliderId); const slides = sliderContainer.querySelectorAll(".slide"); let currentSlide = 0; let intervalId; function changeSlide() { slides[currentSlide].style.opacity = 0; currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].style.opacity = 1; } function startSlider() { intervalId = setInterval(changeSlide, 2000); } function stopSlider() { clearInterval(intervalId); } startSlider(); sliderContainer.addEventListener("mouseenter", stopSlider); sliderContainer.addEventListener("mouseleave", startSlider); } // Create instances for each slider createSlider("slider1"); createSlider("slider2"); 代码更改： createSlider函数采用sliderId参数，该参数将用于识别每个滑块容器。 在函数内部，我使用 document.getElementById 根据提供的 sliderId 查找特定的滑块容器。 其余逻辑封装在函数内，确保每个滑块独立运行。 因此，您可以通过使用不同的 createSlider 值调用 sliderId 来创建所需数量的滑块。每个滑块都有自己的一组事件监听器，并且独立于其他滑块运行。

navigator.getAutoplayPolicy 在 Google Chrome 中不起作用

我在 Google Chrome 版本 120.0.6099.71（官方版本）（64 位）上测试了一个应用程序。我正在尝试编写一个函数来检查是否允许自动播放。我试过： navigator.getAutoplayPolicy("

Chrome 自动播放政策 - Chrome 76

我正在构建一个在 Chrome 上运行的信息亭媒体，可以播放视频和音频。我知道 Chrome 默认情况下只允许自动播放带有静音道具的视频。 而且我知道我能够覆盖...