My audio files won't play anymore? how to fix? - html

<embed name="audioforwebsite" src="audiofile1.mp3" type="audio/mp3"
autostart="false" Hidden="true" ></embed>
<audio loop autoplay>
<source src="audiofile1.mp3" type="audio/mp3">
I use this code and it used to work on my website. However for some reason, it doesn't work anymore.
(i use chrome to play it)
i'm very new to coding and i've looked around the internet for the past hour, but none of the advice seem to work.
my objective is to create an audio file that auto plays when you get into the website, it loops, and it cant be seen in the form of a play/pause button thingy.
help me please.
if you dont know how to fix it, please tell me how to make a new one that you know works using HTML chrome. Thanks.

Auto Play in Chrome ist disabled for security reasons. The user has to click in your page or do anything.

Related

Best way to add youtube video to HTML?

I know this question may have been asked before, but no good answers were found while I was searching.
I have a website where I want to add a YouTube video. The goal is to have an autoplaying video with sound on. A lot of users recommended using the html tag iframe to embed it, which seemed to work perfectly with autoplaying except for the sound.
Does anyone know a better solution to this? Would it be better to just upload the video to the server and use the video tag?
<iframe
width="100%"
height="100%"
src="https://youtube.com/embed/h4gr8eH7D?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1&playlist=h4gr8eH7D&loop=1"
allow="autoplay"
></iframe>
Supposedly they updated using autoplay=1 to where it had to have mute=1 which makes autoplay work, but with no sound. I saw somewhere someone had used mute=2 to have the audio working, but that didn't work for me either.
The new versions of Chrome prevent any audio from running on a webpage until the user interacts with the page. You CANNOT auto-play a video in a chrome browser unless it's muted and this also applies to videos which you upload to your server. If you'll make the user interact with your page before playing audio, you'll be able to play it.
See also How to make audio autoplay on chrome.

Only controls and audio load and work on video in chrome

I'm building a website with php that echos the following html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video_media" style="position:relative; z-index:1; display:block; margin-left:auto; margin-right:auto; width:700px;" controls>
<source src="uploads/15 dialogo 13.mp4" type='video/mp4'>
</video>
</body>
</html>
When I view the page in google chrome there is only a set of controls. The audio plays if I press play, but the video does not show in google chrome. In safari and microsoft edge the video will show up and play fine with the controls.
I didn't tag php in this because when I make an html file with this code the same thing happens, so I'm fairly sure its not an issue with the php.
I've googled this a lot in the last couple days and I haven't been able to find anything about other people having the same problem. I've changed settings on chrome on my computer to try to view the video but that hasn't done anything. I also don't think that it's a chrome settings issue since I've never noticed other sites' videos not playing on my browser.
If there's an obvious answer that I'm missing, sorry... I'm fairly new to web design and I've never used videos on a web page before. If there is another question that has been asked that has the same answer, also, sorry. I did search here first, but I might have missed it. Please just point me to that page. Thanks,
------------UPDATE------------
It doesn't work on firefox either by the way.
Also, I can download the file with audio and video working after download. It's just not playing in the browser.
Can you try with:
<source src="./uploads/15 dialogo 13.mp4" type='video/mp4'>
or meaby changing the name of the video:
<source src="./uploads/test.mp4" type='video/mp4'>
--UPDATE--
Apparently the problem is generated by video codecs
I have one mp4 video that won't play in Chrome or Firefox. The audio plays, with the controls, but no video. What fixed it was pulling the video into Final Cut Pro, which said that it was a non-standard size or format, then I "shared" (exported) the file back onto my hard drive. The new file plays in all the browsers. The file size jumped from 32 MB to 98 MB, for a three-minute SD video.

Embedding Video in O365 Site

I have a video that I would like to embed in an O365 website using HTML5 embeding code. When I insert it, the video works fine but as soon as I click save the video area is just a black box and I can't play it. If I click to open it in another window it does play fine though for some reason.
The code I am using is the following:
<video width="320" height="240" controls>
<source src="my video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Any idea why this would be happening?
While my questions remains valid as I don't know why it is happening, I found a work around for anyone having the same issue.
Rather than inserting the html embed code I inserted a media web part which was much easier and worked! I recommend this route!

Embed mp3 file into html that works across browsers

I am using the following code to embed an mp3 file into my html document:
<embed src="aharddaysnight.mp3" width="140" height="40" autostart="false" loop="FALSE"></embed>
In IE, this works fine, as an mp3 player with controls automatically shows up.
In FireFox, however, a pop-up appears that says additional plug-ins are needed. When I click on the option to install additional plug-in, it doesn't allow me to because of a security certificate error.
In Chrome, the player shows up, but the media starts playing automatically, even though the code says autostart "false".
Does anyone have a better way to embed mp3, or a fix to this problem?
I have tested this in Chrome and Firefox and works in both, with the fall back. However if it is a long file, like the 2 hour audio I am trying it stops playing. Hopefully it will help you and I will keep looking for my fix.
<audio controls="controls">
<source src="yourURL.mp3" />
<source src="yourURL.ogg" />
<!-- fallback -->
<embed type="application/x-shockwave-flash"
flashvars="audioUrl=yourURL.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf"
width="650? height="0? quality="best"></embed>
</audio>`
Try this
type="audio/mpeg"
OR
type="audio/midi"

Audio Player Resize

I've used the HTML5 tags to create an audio player to play a live stream. This plays the stream perfectly however I'd like to reszie the player. I have tried adding width="XXX" height="XX" to it and it makes no difference.
I really want to use HTML5 for this. Is there any way to fix this?
(Browser Safari)
Try the following
<audio tabindex="0" controls="" preload="" id="player1">
<source src="http://terrillthompson.com/music/audio/smallf.mp3" type="audio/mpeg"></source>
<source src="http://terrillthompson.com/music/audio/smallf.ogg" type="audio/ogg"></source>
Your browser does not support HTML5 audio.
</audio>
My first try I was getting the resize too, this seems to fix the issue when starting to play it. If the user "seeks" it still wants to resize...aww crackers XD
It seems to resize because of the (controls="") if we could add an event listener for ("onseeking") and some how reset "controls" back to "blank" that may do it...just an idea at this point, im unsure how to test.
Something like this may help/work
var audio = this.audio;
audio.addEventListener('seeking', function() {
finish(somehowresetcontrolstoblank);
}, false);
Hopefully this gives someone an idea they can run with :)
Sorry I can only answer half the question