When I click the play button, it just goes to the end of the timeline. But if you drag the ticker somewhere in the middle (or anywhere really) it plays the video. So why won't it play initially?
It works in every other browser other than firefox. Im using Firefox 17
I appreciate the help. Thanks.
heres the link
http://www.lonestarveincenter.com/
Sorry for the necromancy but I found the answer to this problem.
The reason why your onClick() event isn't working is because Firefox has it's own onCLick event added to each video element hence whenever you click the video the video starts playing then instantly stops.
function playPause() {
'Before this event is fired the FF onClick event is fired'
player = document.getElementById("PlayerID")
var playBtn = document.getElementById('<%= img.ClientID %>');
if (!player.paused) { 'Player is playing and will go through this code block'
playBtn.setAttribute('Style', 'display: block;');
player.pause();
}
else { 'Player is playing and will skip this code block'
playBtn.setAttribute('Style', 'display: none;');
player.play();
}
}
One very quick test of changing the <source>'s of your video to those on the HTML5 Video site by W3 School's http://www.w3schools.com/html/html5_video.asp shows the desired behaviour: click play and the video starts from the beginning.
I suggest you try re-encoding your video, and testing locally.
How are you encoding at the moment?
I was having the exact same issue. I was using WebM video, and it would play fine - after you picked a spot on the timeline. I converted to .ogv, put it as the first option in the HTML above WebM and mp4, and it is working great in Firefox, and all the other major browsers.
Related
I have a problem with youtube-api when i load a video. I am using loadVideoById function. I have tried also cueVideoById but the result is the same.
OK, here is what it is about.
when i play some video at YouTube page and will finish it in for example middle. YouTube will remember that position and next time i enter this video it will play from that position. Also im logged in in the Chrome browser. So when i load this video at my page using youtube api by function mentioned before it also starts this video from previously remembered position.
I tried to use stopVideo or seekTo(0) after loading it but it doesnt work. Also when i change the time of video and press stop and play next it will start again from remember position. Does anyone know the solution for this ?
JS fiddle:
https://jsfiddle.net/or2w8fpd/6/
Just open video by youtube side stop in the middle, check if youtube saved your position for future (if you return to video where does progress start) then open jsfiddle and try it. remember to be logged in to chrome browser
I'm having issues with my videos not being played back in firefox. I'm attempting to dynamically update one video element's source to play multiple videos without re-creating the element every time my function is called.
E.g., first click makes the video source = video1.mp4, next click maintains that video player, but changes the source = video2.mp4 without recreating the element.
My reason for doing this is to only have to use one filetype for all browsers. I realize I could just make another source tag under the video element and give it a MIME type of video/ogg and it would work with HTML5 in firefox, but I want to have a universal format to take the burden off my users.
I can get this to work perfectly fine in chrome, but when changing to firefox the flash player only plays the first video source then
for some reason becomes undefined.
Firstly, I created a video element inside a lightbox. The lightbox is opened through a function which is called onclick of an anchor tag. When the lightbox is opened, I initialize a videojs player of the video, then set its source to the URL passed into the function. I then load the player, and play it. This works perfectly fine in chrome with HTML5, but in firefox the flash fallback works once then breaks.
I was reading about the problem and thought my problem might be the fact that flash converts the video element into a flash object, then when I try to reference the video with the same ID again, it isn't found because it doesn't exist as a video element anymore.
Here is a code sample: http://jsfiddle.net/7WTrh/12/
I tested in chrome, and it works, but firefox does not.
Thanks for the help in advance.
When you're changing the source, you need to make sure you're passing the mime type as well, so video.js knows what tech it needs.
myPlayer.src({ src: "vid.mp4", type: "video/mp4" });
I have the following HTML and JS:
<script>
function onEnded(ev) {
window.location.reload();
}
</script>
<audio id="audio-element" controls autoplay onended="onEnded();">
<source src="/stream/3" type="audio/mp3" />
</audio>
For some MP3 streams, this works perfectly; playback starts and when the audio track ends onEnded is called. For others, playback starts fine and the audio file is played, but then right at the end the elapsed time counter goes extremely negative, the ended event never fires and audio_element.ended returns false. Here's a screenshot:
This happens in Chrome, but not Safari or Firefox, which behave as expected. Any idea what I can do in Chrome to make the ended event fire?
you must be sure that your server accept range transfer, otherwise chrome will not be able to evalutate time correctly and so 'ended' event will not fire.
you can check this by doing:
curl --head -X GET http://yourmp3location
if you see:
Accept-Ranges: bytes
then is ok, otherwise fix your server
In addition, Have you tried this?
<audio id="audio-element" controls autoplay onended="onEnded">
I had changed the onended attribute so that the browser don't evalutate onended function while rendering your page.
You can also remove the onended attribute to the tag audio and add this at the bottom of your page:
<script type="text/javascript">
document.getElementById("audio-element").addEventListener('ended', function(ev) {
window.location.reload();
}, false);
</script>
We had a very similar problem with Chrome - this browser doesn't emit onended events in new Chrome 64 (and beta 65, canary 66) but when we rebuild MP3 with stream this problem disappeared.
I had a similar problem when attempting to handle audio ending on mobile Chrome:
When I created an audio element via javascript (via GWT), the onended event would never fire for me. I was able to get working however: my issue was that it was not attached to the DOM (if I'm understanding the structure correctly), but was floating in javascript limbo. Once I set the element to display: none and added it to a page element, my onended handler works correctly.
tl;dr
if your element isn't directly attached to a DOM element, try hiding it and attaching it (anywhere really).
As it takes time for the video player to load the mp4 video, does HTML5 support playing a "loading" logo when loading the video ?
Since my asp.net apps is a mobile page, it needs the user to click on the video to play the video (android, iphone not support autoplay). So, I cannot make a "loading" logo as poster, otherwise, the user will be confused about it. I want to display a loading logo when user click play button on iPad.
thanks
Joe
It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
My original theory that I thought should have worked (but wouldn't) was this
Add loading bg image to video when loading via js and css
Remove when ready to play
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!
Also a simple solution to add a preloader image while loading the video:
HTML:
<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">
the poster is a transparent image 1px.
CSS:
video {
background-image: url(images/preload_30x30.gif);
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
}
Use the tag id poster
<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">
More info can be found http://www.w3schools.com/html5/att_video_poster.asp
You could probably do it with JavaScript by creating an image overlay with an animated "loading" gif which you only display when the video is loading and is not ready to play.
You'd have to write JavaScript to link up with the Media API for detecting when the video is ready to play and so forth though (so you could hide the image again), but it should be possible.
My solution was to add the following inside of the window.fbAsyncInit = function():
var finished_rendering = function() {
var el = document.querySelector('div#loading_msg');
el.style.display="none";
}
FB.Event.subscribe('xfbml.render', finished_rendering);
Found: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12
Personally I think the most elegant way to do this is by using some code like this,
<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>
<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>
To make it even better you could use ontimeupdate instead of onplaying which would fire continuously.
As for the delay time actually not 1 but 4 seconds -to me- is the best.
Is there a way to access/listen to the previous/next buttons in the iOS HTML5 video player? Ideally I would listen to some sort of a prev and next event and swap out the videos accordingly without the user having to close the video and click my prev/next buttons.
(source: iphonefaq.org)
I am currently using jwplayer to generate the html5 video and listening to their playlist next/prev listeners don't seem to do the trick. I can always find and attach listeners to the actual <video> tag pretty easily though.
If you attach listeners to the video tag itself then when the user hits next and previous then the listeners in the code will put up on those buttons. I am doing something similar with youTube videos. If you hit next it goes to the end of the youtube video and fires a video complete event tag and then I load the next video when that is called, so that the video will one loop without the next button and two the users can hit the buttons. I have not found a way to monitor the buttons in the player on the iphone side, but if I find it I will post that as well since it is important to know both angels if possible.
Funny thing I think I am looking to try and do the same exact thing. I know how to transition the videos to the next without having to leave the fullscreen mode because of using youTube api in the js but I am not able to observe the quicktime player itself and need to for another feature that I would like to work on.
That's the native iOS player which is a thin version of Quicktime. You'll know if it's an HTML5 player when it doesn't transition from the Quicktime player and your page in Safari. How is your movie being embedded?
I recently had a similar problem and was unable to find a solution using the HTML player. I ended up implementing the video player using MPVideoPlayer Framework and launching it from my web view with a custom URL scheme (AppName:Commnad:Asset). I was then able to use the delegate methods to monitor user interactions. If you would like to see basic implementation, let me know and I can add some code.