autoplay 相关问题

如何禁用 html5 视频自动播放？我尝试过的：如何禁用 html5 视频自动播放？我尝试过的： <video width="640" height="480" controls="controls" type="video/mp4" autoplay="false" preload="none"><source src="http://mydomain.com/mytestfile.mp4">Your browser does not support the video tag.</video> 我会删除 autoplay 属性，因为如果浏览器遇到它，它会自动播放！ autoplay 是一个 HTML 布尔属性，但请注意，不允许使用值 true 和 false。要表示 false 值，您必须省略该属性。布尔属性不允许使用“true”和“false”值。要表示假值，必须完全省略该属性。此外，类型位于源代码内部，如下所示： <video width="640" height="480" controls preload="none"> <source src="http://example.com/mytestfile.mp4" type="video/mp4"> Your browser does not support the video tag. </video> 参考资料： http://www.w3.org/TR/html-markup/video.html HTML 规范（布尔属性）删除视频标签中的自动播放。使用这样的代码 <video class="embed-responsive-item" controls> <source src="http://example.com/video.mp4"> Your browser does not support the video tag. </video> 100% 正常工作尝试将 autostart="false" 添加到您的源标签。 <video width="640" height="480" controls="controls" type="video/mp4" preload="none"> <source src="http://example.com/mytestfile.mp4" autostart="false"> Your browser does not support the video tag. </video> JSFiddle 示例要禁用自动播放，您必须完全删除autoplay属性。否则会被解释为autoplay=true。很不明显！只需在视频标签中使用 preload="none"，页面加载时视频就会停止自动播放。事实上，将 autoplay 设置为 false 并不能帮助某些视频正常播放。请参阅小提琴中的此案例。如果您想暂停所有视频，您可能需要通过代码执行以下操作： videos = document.querySelectorAll("video"); for(video of videos) { video.pause(); } 当然，如果 video 标签位于影子根元素中，则上述情况将不起作用，但几乎没有任何通用解决方案适用于影子根元素。在那里，您将需要一种自定义方法并首先扩展影子根。删除所有标有 autoplay 的属性，因为它在标签中的存在是 true 的布尔简写。此外，请确保始终使用 video 或 audio 元素。不要使用 object 或 embed，因为这些元素默认使用第三部分插件自动播放，并且如果不更改浏览器中的设置就无法停止。 <video class="embed-responsive-item" controls> <source src="http://example.com/video.mp4" autostart="false"> Your browser does not support the video tag. </video> 我希望在编辑模式下 autoplay="false" 但在查看器模式下 autoplay="true" 并通过仅在查看器模式下通过 jQuery 添加属性来解决它： <video id="vid" class="my-vid" poster="https://poster-url/poster.jpg" loop="loop" controls="controls" width="100%" height="100%"> <source src="https://video-url/vision.mp4" type= "video/mp4" /> </video> <script type="text/javascript"> if (document.location.href.indexOf('domain') > -1 || document.location.href.indexOf('test') > -1) { $(document).ready(function() { $('video').attr('autoplay','autoplay') }); } </script> 2024 年什么在起作用？要阻止页面上的任何嵌入视频在下载期间播放，即“自动播放”，使用 autoplay="none" 或 autoplay="0"、删除单词“autoplay”或 preload="none" 不起作用。为什么这么难？可以设置autoplay="" <video width="640" height="480" controls="controls" type="video/mp4" autoplay=""> <source src="http://example.com/mytestfile.mp4"> Your browser does not support the video tag. </video> ps。要启用您可以使用 autoplay 或 autoplay="autoplay" 只需将 autoplay="false" 放在源标签上..:)

html video html5-video autoplay

回答 12 投票 0

有没有办法让嵌入的 Spotify 链接自动播放并重复播放？

我有一个问题。当我访问 Spotify 并获取 iframe 代码时，我希望它能够自动播放并在我的网站上重复播放。我尝试过以下方法： <p>我有一个问题。当我访问 Spotify 并获取 iframe 代码时，我希望它能够自动播放并在我的网站上重复播放。</p> <p>我尝试过以下方法：</p> <pre><code><iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe> </code></pre> <p>也尝试过</p> <pre><code><iframe src="https://open.spotify.com/embed/track/21Yvi82imnN9ZQ87FxMpU9" <button title="Play" class="b8 b9 ba ao bb bc bd be bf bg bh bi bj"><svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; color: white;"><title>Play</title><path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill="currentColor" fill-rule="evenodd"></path></svg></button> onclick="myFunction()">width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe> </code></pre> <p>我想不通。有什么想法吗？我基本上需要它循环。</p> </question> <answer tick="false" vote="0"> <p>您的第二个示例是不正确的，因为您将 <pre><code>IFRAME</code></pre> 和 <pre><code>BUTTON</code></pre> 元素的 HTML 混合在一起。</p> <p>Spotify 不允许您自动播放其嵌入式播放器。很不幸，因为我也想这样做。</p> <p>我最接近的是在我的网站上创建嵌入的本地托管副本，然后添加 Javascript 来手动“<em>单击</em>”播放按钮。</p> <p>Javascript 位于结束 <pre><code></BODY></code></pre> 标签之前：</p> <pre><code><script> function autoplay() { var t = setTimeout(function(){ var button = document.querySelector('[title="Play"]') || false; if (button) { console.log('Click', button) button.click() } }, 999) } document.addEventListener('DOMContentLoaded', (event) => { autoplay() }) </script> </code></pre> <p>超时可能不是必要的，但我还是把它包括在内。</p> <p>这对我来说效果不一致。它第一次可以工作，但随后刷新页面就不行了。我无法更进一步。</p> <p>如果您在开发者控制台中尝试此操作，每次都会有效：</p> <pre><code>document.querySelector('[title="Play"]') </code></pre> <p>如果你弄清楚了 - 请在这里发帖。</p> </answer> </body></html>

loops iframe spotify autoplay

回答 0 投票 0

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>

dom bootstrap-5 carousel pageload autoplay

回答 1 投票 0

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

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

reactjs audio react-hooks notifications autoplay

回答 1 投票 0

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

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

video youtube embed autoplay

回答 1 投票 0

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

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

ios video autoplay ios17 macos-sonoma

回答 1 投票 0

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

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

javascript reactjs reload autoplay react-player

回答 1 投票 0

为什么无法在简单的（HTML，CSS，JS）网站在线实现音频属性

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

javascript html github audio autoplay

回答 1 投票 0

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

我按照此页面上的说明进行操作应该自动播放的嵌入式 Youtube 播放列表是： <p>我按照<a href="https://developers.google.com/youtube/player_parameters" rel="nofollow noreferrer">此页面</a>上的说明进行操作应该自动播放的嵌入式 Youtube 播放列表是：</p> <pre><code><iframe width="535" height="300" src="https://www.youtube.com/embed?listType=playlist&list=PL8kx4WFqlOK90fxZpao5k2WUEmSPchGhR&autoplay=1&loop=1" frameborder="0" allowfullscreen> </iframe> </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&autoplay=1&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><iframe type="text/html" width="400" height="300" allow='autoplay' src="https://www.youtube.com/embed/playlist?list={PlayListID}&autoplay=1&loop=1" frameborder="0"></iframe> </code></pre> </answer> </body></html>

youtube playlist autoplay

回答 0 投票 0

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

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

javascript video mobile-safari swiper.js autoplay

回答 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) { } } }

audio autoplay php-5.5

回答 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><script src="https://geo.dailymotion.com/libs/player.js"></script> <div id="video"></div> <script> dailymotion .createPlayer('video', { video: 'x7tgad0', params: { startTime: 0 }, }) .then((player) => { //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) => console.log(state.videoTime)); }); </script> </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><div id="video"></div></code></pre> 转换为：</p> <pre><code><div id="video" class="dailymotion-player-root dailymotion-player-default" style="background: rgb(13, 13, 13); padding-bottom: 75%; position: relative;"> <div class="dailymotion-player-wrapper" style="height: 100%; overflow: hidden; position: absolute; width: 100%; margin: 1e-05px;"> <iframe allow="autoplay; fullscreen; picture-in-picture; web-share" class="dailymotion-player" frameborder="0" src="https://geo.dailymotion.com/player.html?video=x7tgad0&amp;startTime=0" title="Dailymotion video player" height="100%" width="100%" style="opacity: 1;"></iframe> </div> </div> </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("allow", "fullscreen; picture-in-picture; web-share"); 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 = 'off'; </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><script src="https://geo.dailymotion.com/libs/player.js"></script> <div id="video"></div> <script> let pausePlayer = true; dailymotion .createPlayer('video', { video: 'x7tgad0', params: { startTime: 0 }, }) .then((player) => { //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) => { 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><!DOCTYPE html> <head> <script src="https://geo.dailymotion.com/libs/player.js"></script> <style> .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; } </style> </head> <body> <div id="video"></div> <script> const videoId = 'x7tgad0'; const videoDiv = document.getElementById('video'); const loadVideoButton = document.getElementById('loadVideo'); //https://stackoverflow.com/a/61335543/14926023 function secondsToTime(e){ const h = Math.floor(e / 3600).toString().padStart(2,'0'), m = Math.floor(e % 3600 / 60).toString().padStart(2,'0'), s = Math.floor(e % 60).toString().padStart(2,'0'); return h + ':' + m + ':' + 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 => res.json()) .then((json) => { console.log({json}); const imgSrc = json.thumbnail_360_url; const title = json.title; const time = secondsToTime(json.duration); const username = json['owner.username']; const overlayHtml = ` <div class="player"> <div class="video_poster"><img class="video_poster_image" src="${imgSrc}" alt=""></div> <div class="gradient" style="opacity: 1;"></div> <div class="play_screen"> <div class="play_screen_backdrop" role="button" tabindex="0"></div> <div class="layout"> <div class="layout_top"> <div class="layout_top_left"> <div class="layout_title"> <a class="video_title_link" href="https://www.dailymotion.com/video/${videoId}" target="_blank"> <div class="title">${title}</div> </a> </div> <div class="layout_signature"> <div class="video_owner"> <a class="video_owner_link" href="https://www.dailymotion.com/${username}" target="_blank">${username}</a> </div> </div> </div> </div> <div class="layout_middle"></div> <div class="layout_bottom"> <button class="button_watch_onsite" onclick="window.open('https://www.dailymotion.com/video/${videoId}','_blank')" type="button"> <div class="button_watch_onsite-text">Watch on</div> <svg class="brand_wordmark" aria-hidden="true" viewBox="0 0 131 20" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logo-alt-text" role="img"> <title id="logo-alt-text">Dailymotion</title> <path fill="currentColor" d="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"></path> </svg> </button> </div> </div> <div class="play_screen_content"> <button class="button_play" aria-label="Playback, ${time}"> <span class="button_play_content"> <span class="button_play_left" style="padding: 8px;"> <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> <path d="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" fill="currentColor"></path> </svg> </span> <span class="button_play_right">${time}</span> </span> </button> </div> </div> </div>`; videoDiv.innerHTML = overlayHtml; const playContentButton = document.querySelector('#video .button_play'); playContentButton.addEventListener('click', () => { loadVideo(videoId, videoDiv); }); }); } function loadVideo(videoId) { dailymotion .createPlayer('video', { video: videoId, params: { startTime: 0 }, }) .then((player) => { console.log({player}); player.setMute(false); player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) => {console.log(state.videoTime);}); }); } loadDailymotionPreviewDiv(videoId, videoDiv); </script> </body> </html> </code><pre> </pre> </answer></body>

javascript iframe attributes autoplay dailymotion-api

回答 0 投票 0

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

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

javascript iframe instagram embed autoplay

回答 0 投票 0

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

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

javascript html events video autoplay

回答 3 投票 0

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

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

javascript html html5-audio autoplay

回答 1 投票 0

autoplay 相关问题

最新问题