Programmiererforum

@for (int i = 0; i < Model.Count; i++) {
var item = Model[i];





[i][/i]

@item.Title

@item.CreatedOn.ToString("dd-MMM-yyyy")


}




document.addEventListener("DOMContentLoaded", function () {
const playButtons = document.querySelectorAll(".play-btn");
const iframeContainer = document.getElementById("iframeContainer");
const musicTitle = document.getElementById("musicTitle");
const musicModal = new bootstrap.Modal(document.getElementById("musicModal"));

playButtons.forEach(button => {
button.addEventListener("click", function () {
const musicIframe = this.getAttribute("data-url"); // Get iframe HTML
const title = this.getAttribute("data-title"); // Get song title
const container = document.createElement('div');
if (musicIframe) {
container.innerHTML = musicIframe;
let iframe = container.firstChild;
iframe.setAttribute("muted", true);
iframe.setAttribute("allow", "autoplay; encrypted-media");
iframe.src = iframe.src + "&autoplay=1";

iframe.onload = function () {
if (iframe.contentWindow) {
iframe.contentWindow.postMessage("play", "*");
}
};
const iframeString = iframe.outerHTML;
iframeContainer.innerHTML = iframeString;

musicTitle.innerText = title;

// Show modal popup
musicModal.show();
}
});
});

// Stop music when modal is closed
document.getElementById("musicModal").addEventListener("hidden.bs.modal", function () {
iframeContainer.innerHTML = ""; // Remove iframe to stop playback
});
});


public ActionResult Index() {
var data = _podcastService.GetAllPodcast();
return View(data);
}

Ich versuche, einen podbeanischen Podcast über einen Iframe zu automatisieren, wenn der Benutzer auf eine Wiedergabetaste klickt. Der Iframe lädt korrekt, aber das Audio wird nicht automatisch abgespielt, obwohl ich autoplay = 1 in der URL übergehe und das muted = true Attribut festlegt.[code]

@for (int i = 0; i < Model.Count; i++) {
var item = Model[i];





[i][/i]

@item.Title

@item.CreatedOn.ToString("dd-MMM-yyyy")


}




document.addEventListener("DOMContentLoaded", function () {
const playButtons = document.querySelectorAll(".play-btn");
const iframeContainer = document.getElementById("iframeContainer");
const musicTitle = document.getElementById("musicTitle");
const musicModal = new bootstrap.Modal(document.getElementById("musicModal"));

playButtons.forEach(button => {
button.addEventListener("click", function () {
const musicIframe = this.getAttribute("data-url"); // Get iframe HTML
const title = this.getAttribute("data-title"); // Get song title
const container = document.createElement('div');
if (musicIframe) {
container.innerHTML = musicIframe;
let iframe = container.firstChild;
iframe.setAttribute("muted", true);
iframe.setAttribute("allow", "autoplay; encrypted-media");
iframe.src = iframe.src + "&autoplay=1";

iframe.onload = function () {
if (iframe.contentWindow) {
iframe.contentWindow.postMessage("play", "*");
}
};
const iframeString = iframe.outerHTML;
iframeContainer.innerHTML = iframeString;

musicTitle.innerText = title;

// Show modal popup
musicModal.show();
}
});
});

// Stop music when modal is closed
document.getElementById("musicModal").addEventListener("hidden.bs.modal", function () {
iframeContainer.innerHTML = ""; // Remove iframe to stop playback
});
});


public ActionResult Index() {
var data = _podcastService.GetAllPodcast();
return View(data);
}

[/code]