Streaming live at 10am (PST)

HTML5 Audio/Video embed, controlling multiple players


#1

Hello,

I have embedded an HTML5 audio file with the controls, and it works fine. I have also embedded an HTML5 video file without the controls with autoplay, and found a script that toggles between pause and play, and it works, as long as I have only one video per page (probably something to do with the script…). My website isn’t done, so I just copied the elements I’m speaking about into a new page. Here’s my share link:
https://preview.webflow.com/preview/multiple-audio-files?preview=1699e59beb9b4b0a53885c86b1a37727
but because of the video embed, you have to visit the published site to see it…
http://multiple-audio-files.webflow.io/

I don’t know how to write code, and I haven’t been able to find any posts on this forum or else where on the internet that I can alter to make it work for me… I’ve found a couple code snippets that describe what I’m wanting, but I can’t make it work!

Basically, for both video and audio, I’d like to be able to have the user not have to pause the currently playing media file to be able to play the next one. I’d like the action of playing the next one to pause all current or active players. I’ve found scripts that have event listeners, but unfortunately, I don’t know enough code to be able to alter it for what I need… I image it would be easier to not show the controls for the browser player, and instead have a play button that triggers the script?

I’m also wondering why when I duplicate the video embed, that has the script, why does the script no longer function? (Button to second page with multiple videos)

I also read something about scripts in the HTML embed not being allowed, but need to be in the dashboard? Is this part of my problem?

Thanks so much!!


#2

I’m encountering this problem again, and still can’t find a solution… hoping someone can help me! Just audio…


#3

I have an answer for multiple audio now, in case anyone else is looking.

Put this in the “Inside head tag” of the custom code for the page required:

 <script>
document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);
 </script>

and then you can use the HTML audio tag and add as many players as you need to the embed code widget throughout the page.

<audio controls>
  <source src="..........mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>