So I need to loop an audio file on my site, However I can only get it to play once even if using loop=true
<!DOCTYPE html>
<html lang="en" >
<embed height="0px" width="0px" src="music.ogg" loop="true"/>
You're using <embed> which could end up using most any audio player registered on the system. These players don't really have standard attributes that they use.
Consider using HTML5 audio instead:
<audio src="music.ogg" loop />
Related
I want to embed the audio file on the html page on the server. The audio file is in the same folder as the html file, the path in src in the tag audio is correct, why is it not playing?
html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio>
<source src="f.mp3" type="audio/mp3">
</audio>
</body>
</html>
As described in mdn (https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio), the <audio> tag should be writted like
<audio src="f.mp3" type="audio/mp3"></audio>.
If you want to display your player, add controls to your tag.
If you want to play the media when the page load, you can add autoplay, but, many web browser not enable autoplay by default as you can read here https://developer.chrome.com/blog/autoplay/
I want to display a background music in my web page, the html code is like this:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
</head>
<body>
<EMBED loop=-1 style="FILTER: blue()" width="0" height="0" src="Valder Fields.mp3" autostart="true" > </EMBED>
</body>
</html>
and I have put the music into the same folder of this html file, and I run it well when I test it without use web server,but when I put them into the web server and open this page again,the browser downloads the music and do not display the music,why? And what I should do if I want to display the background music when I use web server?(I use tomcat 8.0 as my web server,and I have tried other version of tomcat, they cannot work as I expect too).
somehow you can use this instead of Embed
Jsfiddle
<audio controls autoplay style="display:none;">
<source src="http://f9.stream.nixcdn.com/bd4ec51ddb6643f1b1a9703df2a5702f/54699824/NhacCuaTui877/TheHappiestTimeOfMyLife-MCMongHuhGak-3645129.mp3" type="audio/mpeg">
</audio>
Embed the audio with HTML5.
<audio src="Valder Fields.mp3" preload="auto" controls></audio>
There are other options which you can find here
I am writing a simple game using HTML5 and JS, to run on my own machine. I want to be able to play a video and to know when the video has finished, and I want to be able to write to a file on an external drive as a backup.
I was going to use Adobe Air, but it doesn't support the HTML5 video tag, so I tried HTA. I can't find anything on the web saying definitely if the video tag is supported or not.
<html>
<head>
<title>Test page</title>
</head>
<body>
<video id="vid_1" width="720" height="480" autoplay><source src="videos/intro.mp4" type="video/mp4"></video>
</body>
</html>
works fine in a browser, but just a blank screen as a .hta
Is the video tag supported in HTA? Or is it the video format that's the problem?
I have tried mpeg and flv, and I have tried an absolute path for the video source.
added later: using windows 7, IE11
So that HTA supports HTML5 elements, you need to add the<meta http-equiv="x-ua-compatible" content="ie=edge" /> tag. But this may not be a very good solution because then elements like frames or the <hta:application> tag don't work. Instead of the <video> tag, you can use the <embed> tag, like this:
<embed src="videos/intro.mp4" width="720" height="480" autostart="true" type="video/mp4">
I am trying to make a MKV video with a MPEG4 video codec and AC3 audio codec available to be played online using Mozilla or Chrome. I have tried multiple methods including native HTML5, which plays back the video but no audio and from what I've read AC3 is a proprietary codec so it is not included in the supported codecs. The code for that was as follows:
<video width='1024' height='768' controls autoplay>
<source src="path_to_src" type='video/x-matroska'>
</video>
I then tried to use the VLC web plugin (as I know VLC can play the files correctly) but have not yet gotten it to play any file, there doesn't seem to be a lot of consistency in the examples for using this method. Here is what I have tried so far using the VLC plugin:
<embed type="application/x-vlc-plugin" version="VideoLAN.VLCPlugin.2"
width="1024" height="768" id="vlc" autoplay="yes" target="path_to_file"></embed>
The VLC page here says to add this:
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
But the codebase doesn't seem to exist anymore and adding that classid to the code above has no effect on the playing of the file. Both methods result in the VLC player box being made but nothing ever getting played and the developer console doesn't show any errors.
So my question is does anyone know a workaround to get AC3 audio to play in the native HTML5 player or what the correct syntax is for the VLC web plugin? Or does anyone have a different player altogether they would recommend? Any and all help appreciated!
HTML5 does not support .mkv / Matroska files but you can use this code...
<video>
<source src="video.mkv" type="video/mp4">
</video>
But it depends on the browser as to whether it will play or not. This method is known to work with Chrome.
You can use this following code. work just on chrome browser.
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Amin Developer!" />
<title>Untitled 1</title>
</head>
<body>
<p><video src="http://jell.yfish.us/media/Jellyfish-3-Mbps.mkv" type='video/x-matroska; codecs="theora, vorbis"' autoplay controls onerror="failed(event)" ></video></p>
<p>Download the video file.</p>
</body>
</html>
To use video extensions that are MKV. You should use video, not source
For example :
<!-- mkv -->
<video width="320" height="240" controls src="assets/animation.mkv"></video>
<!-- mp4 -->
<video width="320" height="240" controls>
<source src="assets/animation.mp4" type="video/mp4" />
</video>
My answer may be incomprehensible to you, so if you do not understand, click on
this
<video controls width=800 autoplay>
<source src="file path here">
</video>
This will display the video (.mkv) using Google Chrome browser only.
HTML5 and the VLC web plugin were a no go for me but I was able to get this work using the following setup:
DivX Web Player (NPAPI browsers only)
AC3 Audio Decoder
And here is the HTML:
<embed id="divxplayer" type="video/divx" width="1024" height="768"
src ="path_to_file" autoPlay=\"true\"
pluginspage=\"http://go.divx.com/plugin/download/\"></embed>
The DivX player seems to allow for a much wider array of video and audio options than the native HTML5, so far I am very impressed by it.
I am trying to make an audio player using HTML 5 project template. I am using the following HTML code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<title>Windows Phone</title>
</head>
<body>
<div>
<p>Audio Player</p>
</div>
<div id="page-title">
<p>Play Audio</p>
<audio controls="">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
I picked up this code from here, I have added the "horse.ogg" to the solution explorer as shown in the screenshot below...
But when I run this appication I get the following output, it reads
Invalid Source
But when I open the same html using a browser I am able to play the file properly.
What could be the problem ?
Is there a better and easier way in which I could play audio files which I will add to the solution explorer and play using HTML 5 ? I am planning to add 10-15 small and funny audio clips and the app will allow user to select it and play it using HTML 5.
Please share your thoughts on this.
As the error message says, it's an invalid source.
Internet Explorer 10 doesn't support Ogg audio files, but MP3 files. Convert your Ogg to an MP3 and it should work fine.
<audio controls>
<source src="horse.mp3" type="audio/mp3">
</audio>
Also, if you're only providing one source you can use the src attribute of the audio element:
<audio src="horse.mp3" controls></audio>
But this is only really recommended if you are targetting one particular type of browser only.