I am trying to embed QuickTime movies into my HTML/ASPX pages but somehow they work on local machine but when i deploy them on my server they dont play at all. I tried all sorts of options but still unable to find a reason for that.
anybody else have been though this issue ?
I did a quick research and find few resources but even though following them works on my local machine but not on production. I am wandering , do i need to setup some sort of streaming to just embed few videos files or what ?
and yeah i did follow the apple article too (who put the blame on simply internet explorer) while my firefox shows the same result. I got the image (startup) but no video as i click to play.
One video is of 11 MB while other is 50 MB. I renamed the files by removing all the spaces now and i can see the QuickTime plugin initiating but after a while the Question Mark is appearing on the QuickTime Logo. Mime type is also video/quicktime so which is correct.
Actually the issue was not with my Page, The QuickTime movies require QuickTime (mov movies) and ITune (m4v movies)to be installed on Server. Hence after installing both softwares, the issues are resolved
How large are the videos? If you are not streaming the plugin may need to download the entire file before it can play, whereas locally it does not. That could cause a very long pause before the movie starts.
Point your browser directly to the movie's URL — not the containing page. See what error you get. Also, is the MIME type correct?
Related
I'm building a small site that displays images and sound based on a slider. It loads the images to the carousel (I'm using Slick). But I'm running into an issue with Chrome and only Chrome. Once I move the slider, new images don't load in the carousel unless I scroll with the slider a few times. I've tested it locally, and I uploaded everything to my server to try it. I got a friend to try it out and it didn't work for him, either.
Here's the site. Warning that it's a pretty heavy load, so I wouldn't open it on mobile: http://kschenk.com/whyte-night.
Nothing comes up in the console, and I don't have any plugins installed. The only hint I get that something is broken is that Chrome keeps spinning and "Processing Request." It works in Safari, Firefox, and even Internet Explorer.
I'm open to any help and can provide any info necessary.
Some stuff that might be useful:
each increment in the slider loads a ~5Mb audio file, streamed using html5 audio tags
each increment in the slider removes the images from the carousel and adds 10 new ones at about 1-2Mb each, which are lazy-loaded
I've tried two different sliders now, this one (Slick) and Owl Carousel. The issue was there for both.
Thank you!
Alright, I figured it out! Figured I'll post the answer in case someone else finds this topic in the future (I hate unanswered questions as much as you, future solution seeker).
So Google Chrome allows max 6 connections per server. Apparently most other browsers, do, too, but some of them don't respect it. That's why it worked in Safari and Firefox. I was loading many image and audio files, so it would hang when I tried to stream all my audio. Something would mess up.
I solved it partly by putting my images on a subdomain. But then only 6 of 8 of my audio files loaded. I found out from Googling around that the 6 connections per server also counts subdomains as a separate server. That's why putting my images on one helped. But I still needed to get my audio files!
So I made two new subdomains, "audio" and "audio2". I put 4 of my audio files on each and load them like I did before, just changing the subdomain depending on the file I'm looking for. It works, because now I only have 4 connections open per server.
I guess it works slightly differently with audio streaming through the HTML5 audio tags. Since not a lot of people use audio on their sites, there's not that many topics on this online.
Your Image is Showing Right, if your chrome is not responding, so then reset your chrome browser and check it out...
you might also consider to make the images a bit smaller: if you choose save for web in photoshop you get down from 1.2MB to 360KB... does the image really need to be 1800x1195px? You might choose a smaller image-version based on browser-window-sizes: good for the user and good for your server :-)
I am trying to upload an MP4 file. But with this specefic file only the sound content is displayed.
With all my other videos there is no problem only with this specefic one.
i found the following SO question:
HTML5 video of type video/mp4 playing audio only
Where he suggest to find a converter.
Does anyone know if this could be the problem and how do i secure that regardless of what video my user uploads that it will always be able to play?
Yes, this can be a problem.
You have not written about your server limitations, so if you have the possibility to execute converters (like ffmpeg) then this is the best solution. This way you can also guarantee fixed resolution, framerate and various other properties, and your server won't eat up all the space if someone uploads a 2GB video... (Users can be dumb sometimes.)
If you cannot run ffmpeg on the server then try reading some about how can you detect codecs on your server, in the language you use, etc. Then, if you still want to, post a specific question.
Also try opening your videoplayer page with different browsers (Chrome, FF, IE at least). They might not support the codecs the same way.
I have two different videos, both (as far as I know) generally captured in the same manner, that I'm trying to play using an HTML5 video tag in Chrome. Both videos open and play perfectly in VLC, so I don't think there's any issue with a corrupted file, and both are mp4's with an H.264 format, using YUV color space. However, when I try to play one in Chrome (Version 21.0.1180.89) it gives me a grayed-out play button, while the other works perfectly. For reference, my OS is Ubuntu 10.10, although I've seen the same problem in newer versions of the OS. This is whether I'm loading the video into the HTML5 tag, or navigating directly to the URL where the video is being stored. I'm somewhat at a loss here, does anyone know what direction I should go to find what the significant differences are between the two videos?
Edit:
This one works: https://dl.dropbox.com/u/100841270/1_G101_20120914_0139PM_Course_101.mp4
This one does not: https://dl.dropbox.com/u/100841270/1_G101_20120914_1156AM_Course_101.mp4
Update:
It appears to have nothing to do with OS, since I've seen the same problem in both Windows and Linux. Chrome 22 beta in Ubuntu didn't seem to work either.
We had this problem and found that encoding the files in accordance with iPhone's webview's standards created files that played fine in Chrome. Chrome and iPhone webview share the same render engine, and it appears they have similar HTML5 video requirements.
Not all H.264 encoded Mp4 files are supported by Chrome and slight differences in the encoding process can produce videos that do not work. Even if the EXACT same encoding settings were used, H.264 is a variable bit-rate encoder, so different videos may exceed bitrate limits.
The encoding settings that were successful for us were:
Only use the H.264 Baseline Profile Level 3.0
Resolution below 640 x 480 and framerate up to 30 fps
B frames are not supported in the Baseline profile.
bitrate limit of 900kb.
Here is the reference we used to arrive at those settings. Likely not all of these are required for Chrome, but we stuck to these rules and found that all videos worked on both platforms. Further research could likely determine the exact setting that is/was causing Chrome to not play the video.
I am running Windows XP, and chrome doesn't like the second one either.
My best guess of the cause is that, the working one is only 6.4 MB, but the other one is about 21.7 MB. Chrome might just be refusing to directly play a video that big. Have you tried having YouTube host it, and embedding their player into your site? That may solve the problem. (If you are worried about random strangers watching the videos, why did you post them here? Why would anybody even want to watch them? Though, you can make videos private on YouTube, in case these are just two videos that demonstrate the same problem you are facing with the real videos.)
That may also be compounded by a different problem that exists with both videos, manifested when I try to use Windows' built-in player. Both videos appear distorted when I use my computer's video player, stretched like 300% horizontally.
Are there other videos you have that fail in exactly the same way? Since these are only test videos for the real thing, if this is the only video with that problem, I would not say that it really is a problem unless it recurs. The dysfunctional video may have just run into that one-in-a-million chance that it has just the right contents for it to not work.
I'm using jQuery to dynamically write <video> objects, and running videojs to init them. After I play a video, SOMETIMES when I try to play it again, it just won't play, and from that point on, even after refreshing the page, no videos will play. Each time, the <video> object renders, but the video just doesn't play. Nothing is written to the console. There don't appear to be any errors. Restarting Chrome resolves the issue, but only momentarily. After playing a few videos, the issue comes back again.
I found that closing other tabs in Chrome does indeed fix the problem, so it appears to be some kind of memory issue.
I'm running Chrome 19.0.1084.46
Exactly how many video tags to you have? What do they look like? Do they include preload='none' attribute? Are the source videos all on the server?
I ask because if you have more than six video tags on a single page pointing to the same source server then you could be experiencing "connection starvation":
Chrome allows only six open connections to a single server (based on DNS name in the URL)
the html5 video tag's preload attribute default value is 'auto'
Chrome's auto behavior is to preload some data and leave the connection open ready to pull more data for the video
So, with more than six video tags on a single page pointing to a single server, the videos will not play. To resolve this particular problem, set the preload attribute to 'none'
Stu is correct. But sometimes, in my experience, Chrome ignores the preload="none" attribute and goes ahead and opens a connection anyway. I've had much problem with this when developing a site which had many smaller videos on it. The connections blocked the rest of the content (images, custom fonts (and when custom fonts are delayed, the text does not even render)) My solution was to build an own preloader which loads the images. This made sure I could control at least when the images (which was the most crucial aspect from a design point of view) was loaded.
That solved the problem with images not showing but the problem still remained. So the best solution is to set up subdomains pointing to the same server, like: v1.server.com, v2.server.com, and so on. This means you won't have to move your files and you get the benefit from enabling browsers to have more open connections. Watch out for increased dns lookup time though.
There is a known bug with Chrome. It will not play the same video in multiple tabs at the same time. This is probably what you are running into if you are a developer and happen to have your page open in two tabs at the same time.
The bug has been known for almost 5 years as of this writing. Feel free to visit the Chromium bug report and star the issue. Hopefully it will increase in priority for the Chrome devs.
In the meanwhile, a workaround is to use a random query parameter in your video src. For example, instead of <video src="vid.mp4">, use <video src="vid.mp4?_u=1253412">. This will break Chrome's caching mechanism and allow the same video to be streamed to two different tabs at the same time.
I had a similar but related issue which I can expand on slightly here.
I had 14 different small videos on a page but only 2 were available at a time. Setting preload = 'none' didn't fix the issue so I also used a data attribute to store the src, and remove the src for all videos that aren't currently being viewed.
I'm setting up a website which ultimately displays videos. The video files are all .mpg and requirements prevent me from converting these to another format such as flv. So far I have been playing around with Windows Media Player but have found that it doesn't play nice with non IE browsers. The problem which arises is that although the video will play, it doesn't shrink itself to fit in the WMP container and so only the top corner is visible. This problem goes away if I download the np-mswmp plugin for Firefox however it is a manual install and I'd rather not leave it to the user. Once the Firefox plugin is installed, Chrome also plays the files correctly but I doubt that the average user would ever think to do this.
Is there a better way to embed .mpg files into a web page, an alternative player which doesn't require file conversion? I have had a play with Quicktime but it only ever shows a Q with a question mark imposed over it, even when I associate Quicktime with .mpeg files. Any advice would be appreciated!
Thanks,
James
I'm sorry to say there isn't a good way to do cross-browser video without being able to force your users to install something. That is why every video site uses flash, since it's the nearest thing to a standard - but of course flash has some gaps in coverage, the most significant being iPhones.
Windows Media Player has only about 70% penetration and Internet Explorer somewhat less. By going this route you will end up with 1 in 3 users unable to view your videos.
Either bite the bullet and move to Flash as a video player or just give your users a download link. A download link is a very easy way to support almost every user, if you can do that.