autoplay 相关问题

AutoPlay是Windows XP中引入的一项功能,可检查新发现的可移动媒体和设备,并根据图片,音乐或视频文件等内容启动适当的应用程序来播放或显示内容。

Bootstrap 5 Carousel 在页面加载后不会自动播放

这个标准 Bootstrap 5 轮播代码... 这个标准 Bootstrap 5 轮播代码... <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="1.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="2.jpg" class="d-block w-100" alt="..."> </div> </div> </div> ...页面加载时在 html 文件中自动播放。 但是,当页面加载后将相同的代码添加到 DOM 时: $('#previous-div').after(carouselHTML); ...轮播不会自动播放。 页面加载后将轮播添加到 DOM 时,我需要采取哪些步骤才能让轮播自动播放? 根据 docs,具有 data-bs 属性的 Carousel 组件会在页面加载时自动初始化,因此稍后添加它们将不起作用。 因此,您可以使用 JavaScript 手动实例化它。 您似乎使用的是 jQuery,因此 BS 组件自动可用,因此您可以通过将 cycle 传递给 .carousel 方法来实例化轮播: $('#previous-div').after($(carouselHTML).carousel('cycle')); 演示: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="previous-div"></div> <script> $(document).ready(function() { const carouselHTML = ` <div id="carouselExampleSlidesOnly" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> </div> </div> `; $('#previous-div').delay(2000).after($(carouselHTML).carousel('cycle')); }); </script> </body> </html>

回答 1 投票 0

如何在React中维护页面刷新时的音频自动播放功能?

问题: 我正在开发一个 React 应用程序,当计时器超过特定限制时,我需要播放通知声音。每次满足条件时,即使在一页之后,也应该播放声音

回答 1 投票 0

如何在手机上自动播放有声视频

我正在尝试让一个元素在 HTML 加载时自动播放并打开声音。我设置了自动播放属性。相关视频是 YouTube 嵌入内容,iframe 也启用了自动播放功能。我也...

回答 1 投票 0

苹果刚刚为视频自动播放创建了新的限制规则吗?

我有一个在 Webflow https://www.menghrani.com/ 中开发的网站,“服务”部分中的信息视频设置为仅在滚动到视图中时才开始播放。它在

回答 1 投票 0

React 中视频自动播放的页面重新加载和重定向之间的区别

问题: 我正在开发一个 React 应用程序,我使用 React-player 库实现了视频自动播放功能。当页面重定向时,视频会正确自动播放(例如,来自

回答 1 投票 0

为什么无法在简单的(HTML,CSS,JS)网站在线实现音频属性

实际上,我的问题是,它不会自动播放歌曲(chinese.mp3)文件中的音频。我把它放在github上了。 没有错误(控制台) 网站没有故障。 但是,只是缺少音频。 你能帮我吗? --...

回答 1 投票 0

自动播放嵌入的 Youtube 播放列表

我按照此页面上的说明进行操作 应该自动播放的嵌入式 Youtube 播放列表是: <p>我按照<a href="https://developers.google.com/youtube/player_parameters" rel="nofollow noreferrer">此页面</a>上的说明进行操作 应该自动播放的嵌入式 Youtube 播放列表是:</p> <pre><code>&lt;iframe width=&#34;535&#34; height=&#34;300&#34; src=&#34;https://www.youtube.com/embed?listType=playlist&amp;list=PL8kx4WFqlOK90fxZpao5k2WUEmSPchGhR&amp;autoplay=1&amp;loop=1&#34; frameborder=&#34;0&#34; allowfullscreen&gt; &lt;/iframe&gt; </code></pre> <p>到达最后一个剪辑时它会循环播放,但不会在页面加载时自动播放。请问这个问题有解决办法吗?谢谢。</p> <p>PS。我知道这个问题之前已经被问过,但我找不到有效的解决方案。</p> </question> <answer tick="true" vote="3"> <h3>试试这个:</h3> <pre><code>https://www.youtube.com/embed/videoseries?list=PLElJF-XLNL2Brb_dTiVNSe9qld1eR_Jft&amp;autoplay=1&amp;loop=1 </code></pre> <h3>谷歌浏览器:</h3> <p>由于 Google Chrome 在版本 66 中删除了 <em>non-muted</em> 自动播放功能,因此您必须在该浏览器中添加参数“mute=1”。 或者在 chrome 设置中更改自动播放策略: <a href="https://stackoverflow.com/questions/49921453/how-to-allow-video-autoplay-in-a-google-chrome-kiosk-app-in-version-66-or-later/50222347#50222347">如何在版本 66 或更高版本的 Google Chrome 自助服务终端应用中允许视频自动播放</a></p> </answer> <answer tick="false" vote="0"> <p>在这个问题上试图解决类似的问题,虽然我无法从接受的答案中得到我需要的东西,但我能够弄清楚如何让自动播放工作。</p> <pre><code>&lt;iframe type=&#34;text/html&#34; width=&#34;400&#34; height=&#34;300&#34; allow=&#39;autoplay&#39; src=&#34;https://www.youtube.com/embed/playlist?list={PlayListID}&amp;autoplay=1&amp;loop=1&#34; frameborder=&#34;0&#34;&gt;&lt;/iframe&gt; </code></pre> </answer> </body></html>

回答 0 投票 0

用户手势后视频不会自动播放音频

我有一个简单的网页,在轮播中的不同幻灯片中包含多个 元素。当视频位于轮播中的活动幻灯片中时,我正在 .play() 播放视频并 .pause() 全部

回答 2 投票 0

在 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) { } } }

回答 4 投票 0

如何阻止 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>

回答 0 投票 0

有没有办法自动播放 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>

回答 0 投票 0

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

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

回答 3 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

使用 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>

回答 0 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.