HTML5 Video and Flash Fallback
Permalink
I have been trying to implement a Flash fallback for an HTML5 video that I am using on a site I am developing. The fallback works to a degree; I am able to get the video to display in IE8 and IE7, but with no playback controls. I used Flash CS5.5, imported the video, added the playback skin using a relative URL (since I have have a myriad of problems with the paths to these external files in the past) and saved the publish files in the same folder. I also used a relative URL for the FLV file so that if it is in the same directory there should be no issues with playback once the files are copied to the server.
Source of inspiration:http://css-tricks.com/snippets/html/video-for-everybody-html5-video...
Fast forward to Concrete5 and uploading the files. For starters, the file manager spreads out each file into different folders within the "files" folder on the server. Well, that won't do because in order for this to work they all have to be in the same folder. So common sense would suggest that simply copying the FLV and the skin playback component into the same folder that the SWF file resides in should do the trick, but no joy. I can get it to play locally, but not once I set up the embed code in the block and the files are hosted on the server. I tried different things, such as using an absolute URL to the SWF file, and a relative URL to it, etc. and like I said I was able to get the video to display, just no playback controls. Rather odd, but somewhat expected with Flash (at least in my experience).
Anyone have any suggestions? Any help or direction would be appreciated.
Source of inspiration:http://css-tricks.com/snippets/html/video-for-everybody-html5-video...
Fast forward to Concrete5 and uploading the files. For starters, the file manager spreads out each file into different folders within the "files" folder on the server. Well, that won't do because in order for this to work they all have to be in the same folder. So common sense would suggest that simply copying the FLV and the skin playback component into the same folder that the SWF file resides in should do the trick, but no joy. I can get it to play locally, but not once I set up the embed code in the block and the files are hosted on the server. I tried different things, such as using an absolute URL to the SWF file, and a relative URL to it, etc. and like I said I was able to get the video to display, just no playback controls. Rather odd, but somewhat expected with Flash (at least in my experience).
Anyone have any suggestions? Any help or direction would be appreciated.
I did indeed, but found that I couldn't set it up easily enough and have the video frame be responsive. I had experimented with using layouts to add containing divs that I was attempting to apply IDs and classes to to control the width of the video frame as shown here:
http://alistapart.com/article/creating-intrinsic-ratios-for-video...
which actually worked successfully when I hard-coded the video into an HTML block, and was able to manually add the containing divs, but using layouts proved to be a bit of a disaster, trying to nest layouts inside layouts and so on.
I asked the developer the question about responsiveness and haven't heard anything and thought I would push forward.
http://alistapart.com/article/creating-intrinsic-ratios-for-video...
which actually worked successfully when I hard-coded the video into an HTML block, and was able to manually add the containing divs, but using layouts proved to be a bit of a disaster, trying to nest layouts inside layouts and so on.
I asked the developer the question about responsiveness and haven't heard anything and thought I would push forward.
Oops.. I accidentally marked your reply as a best answer when I was to hit reply.
Anyways, if you include a js file with the jQuery I have set up in the link below, I think you will be able to have all videos responsive.
http://jsfiddle.net/VaKAc/
The code sets the video dimensions to the size of the container div.
If this solves the problem you can mark this as a best answer instead.
Anyways, if you include a js file with the jQuery I have set up in the link below, I think you will be able to have all videos responsive.
http://jsfiddle.net/VaKAc/
The code sets the video dimensions to the size of the container div.
If this solves the problem you can mark this as a best answer instead.
I appreciate your response, but as I am no expert with jQuery or PHP, I would have a difficult time implementing this without precise direction. I get the CSS part but am not clear on how or where to place the additional code.
I got it to work partially, but maybe this can be fixed. When the browser window is re sized, the video collapses. If the browser is refreshed, the video re-sizes to the the right size. In IE9 the poster image shows correctly, but the video is collapsed. See screenshot attached. I added "video" to the list of format types in the javascript you provided, because the HTML5 video block uses that along with the video source to display the proper video.
We're getting closer, though.
We're getting closer, though.
Sorry, I totally forgot the video tag in the js I provided.
Just a question though, is the video always collapsed in IE9 or only after a resize?
Just a question though, is the video always collapsed in IE9 or only after a resize?
it's always collapsed.
I actually solved the issue primarily through tweaking the CSS, but if you have a more elegant method with the javascript that could be implemented more easily, it would be appreciated.
I used this:
http://www.hexagonwebworks.com/2011/making-videos-responsive/...
with a combination of suggestions from other posts. The VideoJS that is currently being used in the plugin has not been updated so this post is more relevant. The CSS was breaking the full-screen view, so I had to override some styles in the add-onn's CSS to fix it. Primarily it had to do with the height of the full-screen container. The only thing that doesn't display correctly now is the full-screen view in IE7 and IE8- the video stretched to fit the width and height of the monitor rather than respecting the aspect ratio. I only have so many hours in the day so I might let that one go.
I actually solved the issue primarily through tweaking the CSS, but if you have a more elegant method with the javascript that could be implemented more easily, it would be appreciated.
I used this:
http://www.hexagonwebworks.com/2011/making-videos-responsive/...
with a combination of suggestions from other posts. The VideoJS that is currently being used in the plugin has not been updated so this post is more relevant. The CSS was breaking the full-screen view, so I had to override some styles in the add-onn's CSS to fix it. Primarily it had to do with the height of the full-screen container. The only thing that doesn't display correctly now is the full-screen view in IE7 and IE8- the video stretched to fit the width and height of the monitor rather than respecting the aspect ratio. I only have so many hours in the day so I might let that one go.
http://www.concrete5.org/marketplace/addons/video-js-player/...