I'm new to HTML5 and am trying to get a simple example working of calling a .swf video file from an HTML button (or similar).
I have gotten this code so far but it doesn't seem to work...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video src='test.swf' id='v' controls>
Your browser does not support HTML5 video.
</video>
</br>
<button onclick="document.getElementById('v').play()">Play</button>
<button onclick="document.getElementById('v').pause()">Pause</button>
</body>
</html>
Any help would be appreciated...
You can use embed tag:
SWF with background
<embed src="main.swf" width="550" height="400" />
SWF WITH transparent background
<embed src="main.swf" width="550" height="400" wmode="transparent" />
SWF WITH FLASHVARS
<embed src="main.swf" width="550" height="400" flashvars="id=hello world" wmode="transparent" />
To control the swf, you need to use External Interface functions.
.swf is not a supported file format for the <video> element the only supported file formats are MPEG-4/H.264 Ogg/Theora and WebM/VP8 with suppport for individual formats varying across browsers.
For information on which browsers support what, refer to the excellent caniuse.com.
For a run down of the HTML5 video element I highly recommend Operas Introduction to HTML5video
Related
I tried searching various ways of embedding my swf files in to the browser using video, object and the embed tags.
video tag did not let me run the swf.
This is what i had tried :
<video controls>
<object data="video.swf" width="320" height="240">
<embed src="video.swf" width="320" height="240">
</object>
</video>
I also tried:
<video controls>
<object data="video.swf" width="320" height="240"></object>
</video>
and
But found no luck.
Then i tried the embed and the object tags:
<embed src="video.swf" type="application/x-shockwave-flash" height="200" width="200">
<object type="application/x-shockwave-flash" data="video.swf" height="200" width="200">
Both worked fine.
But i want to have the controls [play/pause/sound controls] that comes along with the video tag.
Is there any way i can have the controls along with embed or object tags ?
Or can i embed my swf file into the video tag ?
Any help would be appreciated.
If you'd like controls and you're trying to embed your own SWF File, you'll need to build the player yourself. Either through flash or by using JavaScript functions to send instructions into the flash file.
I'm assuming you're doing this for cross browser compatibility, If working in Actionscript doesn't sound like much fun (hint: it's not), you could use something like videoJS which would provide you with a fully featured player. I personally use MediaElement which I've found to suit my needs.
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">
Apparently I'm a total noob when it comes to web development. I just need help making a simple html file that embeds a video. I can't use youtube. I just need to embed the local file and it's not working.
<!DOCTYPE html>
<head>
<title>Testing</title>
</head>
<body>
<video id="0" controls width="502" height="479">
<source src="OWA tutorial.webm" type='video/webm'>
<source src="OWA tutorial.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</body>
</html>
This doesn't work. "OWA tutorial.mp4" is in the same folder as the html file. What am I doing wrong?
Tried this:
<!DOCTYPE html>
<head>
<title>Testing</title>
</head>
<body>
<video id="0" width="502" height="479" controls>
<source src="loop.ogv" type="video/ogg">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</body>
</html>
Worked well. Just replace the ogg with mp4, in your case.
Edit:
I'm not saying that you should use .ogv instead of .mp4.
I just used it as example because I've tried with a .ogv file (just because I don't have a .mp4 file here right now).
Your code should work if you copy mine and just replace the "loop.ogv" with your filename and the "video/ogg" with "video/mp4".
Sorry if it was misleading.
I have a image on my html page and i want it to play a sound effect when i click on it.
Here's the image code:
<img src="images/button1.png" width="32" height="32" onclick="alert();">
I want to change the alert box into the sound effect that i load in. How do i do it?
Well, it is not so easy, actually it is difficult to be accomplished ONLY with HTML. See here for more details.
You`ll face a various problems like:
Different browsers have different audio format support.
If a browser
does not support the file format, the audio will not play without a
plug-in.
If the plug-in is not installed on the users' computer, the
audio will not play.
If you convert the file to another formats, it
will still not play in all browsers.
Using A Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to an mp3 file. If a user clicks on the link, the browser will launch a helper application to play the file:
Play the sound
The best solution by my opinion is to use a Flash for playing sounds, i.e. make your links as Flash objects/buttons/text and assign sounds to them inside Adobe Flash on hover/click/etc.
Use SoundManager and will free up from a lot of headaches. Even more it will fallback nicely to flash if audio is not supported natively by browser.
However if you don't want to relay on a third party library there is another solution, a little bit daunting and exhausting but functional in every browser supporting the audio tag.
The first thing you need to do is to populate the audio tag with the source content. You can do this with the following lines of code:
<audio id = 'audio'>
<source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
Because there is not a common agreement between different browser vendors regarding the supported audio format we need to include each supported ones. If one browser does not support it, then will skip it and fallback to the next one. If none of them is supported then you can use flash as a fallback. Google AJAX Libraries API will facilitate much our work. Below is the full source code:
<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script>
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" onclick="playSound();">
<div id="fallback"></div>
<audio id = 'audio'>
<source src="http://www.hellopixel.net/click.mp3" type="audio/mpeg" />
<source src="http://www.hellopixel.net/click.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
<script>
function playSound() {
if (document.getElementById('audio').canPlayType) {
if (!document.getElementById('audio').canPlayType('audio/mpeg')) {
document.getElementById('audio').style.display = 'none';
swfobject.embedSWF(
"player_mp3_mini.swf",
"fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"http://www.hellopixel.net/click.mp3"},
{"bgcolor":"#085c68"});
} else {
document.getElementById('audio').play();
document.getElementById('fallback').style.display = 'none';
}
}
}
</script>
Fiddle: http://jsfiddle.net/SMR4V/
Note: I have not created the ogg file, so won't work in firefox, because FF is using ogg files.
I used this code for embed a mp3 file to html:
<EMBED SRC="mp3 link" HEIGHT=60 WIDTH=300>];
the problem is that the browser download the file and than he play it,
there is any way for do it in buffer or something like this?
because i want the user will not wait.
For browsers that support HTML 5 you can use this:
<audio src="song.mp3" controls="controls">
Your browser does not support the audio element.
</audio>
Otherwise you'd have to use JQuery as suggested above, or a flash audio player.
Google has a good player :
<embed type="application/x-shockwave-flash" flashvars="audioUrl=MP3_FILE_URL" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>
Use the audio element of HTML5:
<audio src="[mp3 link]" preload controls></audio>