I'm currently facing an issue with AMP-audio.
When i open the page that has an mp3 file it works for the first 5 mints and then it go to the end of the mp3 file directly.
i'm wondering, is there any thing that i can do to prevent that, or this is a network issue?
my code is like this
<amp-audio width="auto"
height="50"
src="1.mp3"
preload="auto"
autoplay
controlsList="nodownload">
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
</amp-audio>
Thanks in advance .
Related
I am using video.js npm library for my next.js project. My video.js component is given below and it will be having the videos in m3u8 formats.
on my localhost, it sometimes shows the video, sometimes doesn't show. It loads at first the control bar and big play btn is displayed, but then in a second, it disappears and gives the error as
The media could not be loaded, either because the server or network failed or because the format is not supported.
I am using the latest version already for video.js which has VHS support and HLS support. version is "^7.18.1"
return (
<div data-vjs-player>
<video
id={id}
ref={videoRef}
className="video-js vjs-default-skin vjs-big-play-centered"
poster={poster}
autoPlay={false}
>
<source src={src} type="video/mp4" />
<source src={src} type="application/x-mpegURL" />
<source src={src} type="video/webm" />
<p className="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
{' '}
supports HTML5 video.
</p>
</video>
</div>
);
The problem was with back-end. back-end needs to add CORS settings to make it work.
I have been trying to figure out why each image on my WordPress site is resulting in the following code being changed in all images I upload:
<figure class="wp-block-image size-large image-shadow img"><a href="https://www.example.com/blog-post-title/" target="_blank" rel="noopener noreferrer"><img width="600" height="400" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.example.com/wp-content/uploads/2020/08/blog-post-title-image-1.jpg" alt="image description" class="wp-image-18844 lazyload" data-srcset="https://i1.wp.com/www.example.com/wp-content/uploads/2020/08/blog-post-title-image-1.jpg?w=600&ssl=1 600w, https://i1.wp.com/www.example.com/wp-content/uploads/2020/08/blog-post-title-image-1.jpg?resize=300%2C200&ssl=1 300w" sizes="(max-width: 600px) 100vw, 600px" /><noscript>
This results in Ahrefs scans displaying 404 errors for all URLs; for example, the URL below loads fine, but there is an added /images/gif to the string.
https://www.example.com/blog-post-title/
becomes
https://www.example.com/blog-post-title/images/gif
in the Ahrefs report coming from the crawl. It seems from what I have been able to find out that the issue may be coming from here:
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
I host on SiteGround and use their CloudFlare addon with some settings applied through my CloudFlare account.
Has anyone else encountered these 404 errors? If so, may I ask how they were resolved?
I've experimented with various redirects to the post (which haven't worked and maybe the completely wrong thing to do).
It seems that this issue was triggered by the JetPack Lazy Load settings. These have since been turned off and the issue has been resolved.
I am using lazy sizes for the lazy load of my youtube videos. On every page the lazy load does work, but not on these two, more precisely, the whole video just disappears/is not displayed. The two pages are in the same folder as all other pages, which do work. The link to lazysizes.js is there <script src="lazysizes.min.js" async></script>
Here is the iframe on one of the working pages with the video being displayed:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/xxx?rel=0" importance="low" loading="lazy" frameborder="0" class="lazyload" allow="encrypted-media" allowfullscreen></iframe>
and here the iframe that just won't work/does not display the video - it's identical:
<iframe width="640" height="360" data-src="https://www.youtube.com/embed/3FOZ2CTaaWk?rel=0" importance="low" loading="lazy" class="lazyload" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
I know this just doesn't make sense, but my hope is that one of you stumbled upon the same problem. I have tried copying and pasting (swapped them, so it is not really the iframe code) and changing it, reloading the js etc. but nothing helps. The iframe is identical with the other pages. I have no idea how to find out what's missing here.
I'm stupid, the console revealed it: the lazysizes.min.js was loaded into the directory of this particular URL. Since this URL (and its /.../ directory) is artificially created the lazysizes.min.js could not be found in that directory (though on the FTP server the js file is in the same directory as the source php file that loads it) it could not be loaded.
A simple line of extra code that includes the lazysizes.min.js above the iframe embedment with an absolute URL to the js file solved the problem!
I've got a my own website and I've put on my website a radio interview (MP3 file). On my website there is a tool which takes the MP3 file and plays it.
My file URL is "http://www.abc.com/invterview/July 9 interview.MP3"
Now, another website wants to play the same file and asks me to give te embed/share link.
Can someone help me how to accomplish this link?
I googled and found this webpage http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/ ,which explains how to accomplish an EMBED, but I've never done this and I know Chrome, IE, FF, Safari have it's own instructions...
So can someone guide me how to accomplish an EMBED URL so it will work on all Browser?
Do I need to use or what is the common use??????
if it was video file I could upload it to Youtube and send that link, but this is a MP3 file.
thanks
You could use HTML5, which has native support for playing audio.
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
If a browser does not support HTML5, the code above will fallback to the embed code.
Other than that, you could use the yahoo media player. It's not the coolest or best around, but it's simple and it gets the job done.
Play Song
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
I am trying to add HTML5 audio control to my page. Here's the code:
<audio src="../../Content/BattleNet_MusicLoop.ogg"
controls="controls" autoplay="autoplay" loop="loop">
Your browser does not support the new HTML5 audio element.
</audio>
When I click debug, I can see the audio player for about a second and then it turns dark gret with light "x" icon in the middle. I clicked on "Copy Audio Source" and the source seems to be correct. Browser is not the issue because it's a Firefox 4.0 Beta 1. It plays this exact HTML5 audio player fine on http://www.w3schools.com/html5/tag_audio.asp. That's where I got it from by the way.
I am using Visual Studio 2010 HTML5 add-in by Mikhail Arkhipov. My project is based on ASP.NET MVC 2 and .NET Framework 3.5
Any ideas what could be causing this issue?
You have to upload the song to a server, for some reason firefox can't play the song if it's on the localhost, try to upload the file to some host like toofiles and get the url and use it as src
example:
<audio autoplay="autoplay" controls="controls" >
<source src="http://dl.toofiles.com/vaaoje/audios/rooster.ogg" type="audio/ogg" />
<source src="http://dl.toofiles.com/vaaoje/audios/rooster.mp3" type="audio/mpeg"/>
</audio>
the ogg file is for firefox and the mp3 file for chrome and IE.
Did you try to replace
"../../Content/BattleNet_MusicLoop.ogg"
with
'<%= Url.Content("~/Content/BattleNet_MusicLoop.ogg") %>'
?
Try it in chrome, it should work.
I had the very same issue with firefox.
what DTD your page declares?