hiii all,
this is my very first post on stackoverflow, I always used to be a guy sitting back and see what happens here, never contributed, but now i finally got a chance..
MY question is I have a swf file, and I am playing it on my html page using SWFObject,now I want to implement a javascript method which triggers when videos gets completely played or get stopped..
here's my code
<html><head>
<title>PENSIONS BOOST</title>
<script type="text/javascript" src="https://aimhighermarketing.s3.amazonaws.com/videocontrollers/swfobject.js"></script>
</head><body>
<div id="player" align="center">
<script type="text/javascript">
var so = new SWFObject('https://aimhighermarketing.s3.amazonaws.com/videocontrollers/player.swf','mp1','640','480','10');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('frontcolor','FFFFFF');
so.addVariable('lightcolor','FFFFFF');
so.addVariable('screencolor','FFFFFF');
so.addParam('flashvars','&file=HTTP://soci7361#socialnetworkbizbuilder.com/videos/pbsalesvideov2.mp4&&controlbar=none&autostart=true');
so.write('player');</script>
</div>
</body>
</html>
,any kind of help is very much appreciated..
Kindly help..
Thanks
Would love to help you out, but unfortunately you are missing very important information. SWFObject is just a tool to place the object tag safely on the user's browser. Remember those days you had to click on the OBJECT tag in order to activate it? Well, SWFObject fixes that... and much more.
What we need to know is which video player are you using? Flash is actually what fires the events to a javascript, which is what you'd be listening for.
The most popular of them is usually JWPlayer or Flowplayer.
If you can let us know which one it is, or what kind of flash player you are using, I'd be happy to do some quick research for you.
Never mind, I just visited your SWF File and found it is JW Player 4.
Here is the JS Code to listen for event changes:
var player;
function playerReady(object) {
player = document.getElementById(object.id);
player.addModelListener("state","playerStateChanged");
}
function playerStateChanged(obj) {
if (obj.newstate == 'COMPLETED') {
// Your video has finished playing
} else if (obj.oldstate == 'IDLE' AND obj.newstate == 'PLAYING') {
// Your video started to play. Now, this is not fully accurate. IDLE can also mean they pressed STOP and sat there.
}
}
In all reality, you should have a "startedVideo = false;" and on the first play change it to true. Then you'll be able to tell when it was first started playing..
Even though JWPlayer is up to version 5, they do still have a full JS API Doc online:
JWPlayer 4 JavaScript API
Related
I am trying to view a video stream from an IP camera in a web page, when the stream can be played I want it to start automatically. Trying to do that with a timer, try to play and if that fails, try again.
The timer (timeout) doesn't seem to do that, however if I execute the script using a button, it does. What am I missing?
see the code below.
thanks,
Ron
PS: I commented out the setTimeout functions, to make the button work.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function playVid() {
var videoElem = document.getElementById("IPcamerastream");
var playPromise = videoElem.play();
// In browsers that don’t yet support this functionality playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
videoElem.controls = true;
}).catch(function(error) {
// Automatic playback failed.
// setTimeout(playVid, 1000);
});
}
}
//setTimeout(playVid, 1000);
</script>
<button onclick="playVid()" type="button">Play Video</button><BR>
<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540"></video>
</body>
</html>
Look into the features of the video html5 tag:(https://www.w3schools.com/tags/tag_video.asp)
one of the optional attributes is autoplay (Specifies that the video will start playing as soon as it is ready) so there is no need to set timeout.
<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540" autoplay></video>
Move your script below the video element, and you should not need the timeout at all, because the element will already be initialized when the script is executed. So document.getElementById should resolve the element right away.
Using timers will introduce race conditions. If anything, you should add a listener to the DOMContentLoaded event.
Welcome Ron,
This is a well formatted question, but target browser info could also assist in helping you resolve your issue. Please consider adding it in future!
As for your problem, you tell us that you wish the video to autoplay, I'm assuming on page load?
I've also removed the duplicate source paste.
In this case, you only call playVid() from within the promise erroring out. The initial call is bound to the button click event.
In short, only clicking the button will initiate the playVid() function.
You need to add an event listener for DOM readiness and call playVid() within that. Otherwise, it's only being called when you click your button!
document.addEventListener('DOMContentLoaded', (event) => {
//the event occurred
playVid();
});
You can also use the autoplay HTML option in the video tag.
lang-html
<video {...} autoplay />
I had an almost similar problem ، when I received the video stream in a webrtc project, the video would not be displayed without clicking a button.
if you want to play automatically received stream video, you should add "muted" in the video tag.
I am wondering if there's a way to play audio when user exit my website?
for example. "thanks for visiting etc."
No, you can't reliably play audio when the user leaves the website. Although you can start it (using onbeforeunload), it won't finish playing.
And seriously, if you did, it would only irritate people. :-)
I did a little test(still novice to the whole HTML5) and came up with this solution:
<script>
function myLoadHandler(evt)
{
var audio_file1 = document.getElementById('audioID');
audio_file1.volume = 0
audio_file1.play();
}
if ("onpagehide" in window) {
window.addEventListener("pageshow", myLoadHandler, false);
} else {
window.addEventListener("load", myLoadHandler, false);
}
</script>
<script>
function playAudio() {
var audio_file1 = document.getElementById('audioID');
audio_file1.volume = 1
audio_file1.play();
}
</script>
<body onunload="playAudio()">
<div>
<div>
<audio id="audioID" src="your_audio.wav" preload="auto"></audio>
</div>
</div>
</body>
I tested it on latest Chrome and Firefox. Works only in Firefox-I guess that Chrome deletes all resources from memory quicker, than the javascript can execute.
Another weird thing is that even with preload="auto", the audio seems to actually buffer after it is played(either from script or from UI), so that's why I play it on load with volume 0.
And one more thing- like someone mentioned in the previous answer-it would probably be annoying. Use with caution.
I setup a HTML5 page, that include a node.
The page will to playing a music(mp3 format),but it just play sound to end, and I use javascript to control audio element,even so,I can't replay it and only STOP.
Does HTML5 audio Element support REPLAY? And how to?
please read this
http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/
and for replay event
you can set option, on replay click
audioElement.currentTime=0;
audioElement.play();
The suggestions above did not worked for me or where not applicable. I needed to replay sound when my code needed to do it.
The following code worked (at least chrome):
audioElement.setAttribute('src', audioSrc);
audioElement.play();
in other words, setting the src attribute again, then play() did the job
If the server hosting the video does not support seeking on client (HTTP RangeRequest), the command
audioElement.currentTime=0;
from #JapanPro's answer is silently ignored in Chromium. This behavior is filled as crbug #121765.
There is a handy guide on MDN how to configure your server to play nice. But if you cannot, I had success with doing
audioElement.load();
which unsurprisingly reloads the audio source and seeks to the start as a side effect. Not nice, but it is quite intuitive and it works.
source: http://www.whatwg.org/specs/web-apps/current-work/#loading-the-media-resource
Use:
audio.pause() // important!!!
audio.currentTime = 0
audio.play()
The html5 audio element has a loop attribute set it to loop=loop
http://www.w3schools.com/html5/html5_audio.asp
don't use node.load() this is way too slow for slow devices.
To stop, you should just use:
node.currentTime = 0
To replay you can do:
node.currentTime = 0
node.play()
You can try this:
<audio id="audiotag1" src="audio/flute_c_long_01.wav" preload="auto"></audio>
Play 5-sec sound on single channel
<script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag1').play();
}
</script>
Ref: http://www.storiesinflight.com/html5/audio.html
In HTML5 you can just set audioElement.loop='true';
I am trying to generate sound using JavaScript. I have used the following code
<html>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
function PlaySound(soundObj) {
var sound = document.getElementById(soundObj);
sound.Play();
}
function init() {
//alert("");
PlaySound('sound1')
}
window.onload = init;
</script>
<body>
<form name="myform">
<input type=button id="b1" name="b1name" value="Play Sound" onClick="PlaySound('sound1')">
</form>
Move mouse here
<embed src="beep-5.wav" autostart="false" width="0" height="0" id="sound1" enablejavascript="true">
</body>
</html>
Sound is being generated on button click and on mouseover. It is not being generated in the init function. If I call the below function in another JavaScript function, it does not work. Another point is that if I keep alerting before calling, then sound comes.
PlaySound('sound1')
I have tried using $("#b1").click(); (button click in JavaScript) but it's not working.
I know this is duplicate of this question, but the answer there did not work for me. I am really confused. Please help out.
Can I play this sound twice at a time?
The sound file may not have finished loading when init is called, but if you include an alert or when you manually click a button, there is enough time in between for the browser to have loaded the file.
That being said, embed is a non-standard and deprecated tag, and you really shouldn't be using it for playing sounds. Have a look at the HTML5 audio tag instead.
If you want a web page to play a sound via JavaScript, and you want the page to:
validate
work in all modern browsers
work across multiple platforms
work without plugins
The answer is simple: you can't do it. End of story.
Sure, you can come up with an example that works in one version of one browser on one platform, but I'll guarantee you: it won't work everywhere.
a fast and dirty way (it also compatible with old browsers, even IE5) is to use can embedded a small wave file inside your javascript which then could be played as a resources (without saving to actual file), use binary encoding (same as embedding PNG into JS).
a better way is building a JS Audio object, playing a bit (with buffer) that can be generated any frame-sound you'll like...
use JS Audio Object
var output = new Audio();
output.mozSetup(1, 44100);
var samples = new Float32Array(22050);
for (var i = 0, l = samples.length; i < l; i++) {
samples[i] = Math.sin(i / 20);
}
(also here)
If we generate sound using jquery sound plug in, http://plugins.jquery.com/project/sound_plugin playing sound on start up/java script without much delay. Working fine in IE and firefox.
By Introducing delay according to comment by casablanca, sound is playing in java script.Here is the code i have added:
This referring link Introduce delay
function callback(){
return function(){
PlaySound('sound1');
}
}
function init() {
// alert("");
setTimeout(callback(), 500);
}
I've seen many web pages with a simple sound on /sound off button which plays music or some mp3 file when you press sound on and turns it off when you press off.
How do I do that?
Hi, I wasn't planning on using Flash -- if there is a standard plugin I could use and then make modification to the script, that'd be cool.
I'm open to whatever is the "standard" way to do it.
Here's the proper way to do it in AS3.
Initialization:
var sound:Sound;
var channel:SoundChannel;
var pos:Number;
var numLoops:Number = 0; // 0 to loop forever
sound = new Sound();
sound.load( new URLRequest("song.mp3") );
channel = sound.play( 0, numLoops );
Stop playback:
pos = channel.position;
channel.stop();
Start playback:
channel = sound.play( pos, numLoops );
It's true that you could toggle the volume to zero and back, but this leaves needless overhead, and when you restart the sound it will have advanced from where you "stopped" it.
I used google and then I used pixel1 standalone
You can try embed my Javascript SoundPlayer and see if that works out for you. Its easy to use, just copy the code below into your webpage.
<script language="javascript" type="text/javascript" src="http://lablogic.net/scripts/soundplayer/audio_o.js"></script>
<a href="#" onclick='play("your-sound-file.mp3")'>PLAY</a>
<a href="#" onclick='stop("your-sound-file.mp3")'>STOP</a>
just change "your-sound-file.mp3" to the url or location of your sound file. It should work in most browser and most sound format. If it doesnt work I would really like to get feedback, so I can improve it even more. You can try out the script here to see if it works first: free javascript sound player
Are you using Flash? In that case you can do it like this:
stopAllSounds();
or
theSound.stop(["id"]);
Assuming you are using Flash as above.
AS2
stopAllSounds();
AS3
var xf:SoundTransform = SoundMixer.soundTransform;
xf.volume = 0;
SoundMixer.soundTransform = xf;