I've got VideoJS working beautifully, except for the chapters function.
I'm just using the demo.html that came with the JS package. Edited it to include my mp4, and subtitle and chapter VTT files.
Subtitles work great, but when I set the chapter track to default="default" (as is necessary to enable it), the video control bar disappears.
Suggestions?
Working subtitles page
Broken chapters page
My VTT syntax seems to be correct:
WEBVTT
1
00:00:00 --> 00:00:22
Chapter 1
2
00:00:22 --> 00:00:30
Short chapter
3
00:00:30 --> 00:00:45
Finale
I've seen a few folks with the same issue in the last month, all unresolved.
One post from July 2012 has chapters working - if anyone has a link to the old VideoJS version that may have been used at that time, I'd love to try it.
Chapters support isn't available in Video.js 4 quite yet (hopefully soon!), but you can still use version 3.2 from the CDN.
video.js
video-js.css
Be aware that Video.js 3.2 is unsupported at this point.
Related
I inherit a website from another programmer and I am facing an issue. The website has a css animation that works perfect in Chrome and Mozilla but doesn't work in Internet Exporer 11 (maybe previous versions as well). The background is just plain white with no background image animation.
I guess it is something with the prefixes of the animation CSS but I can't make it work
Can anyone help me?
Link: http://presentamivuelo.com/ver-view/TIiY1wLt
I know this post is old, but I'm suspecting the issue may have been the same as the one posted here: Background-image in keyframe does not display in Firefox or Internet Explorer
If anyone else is here for the same reason, you cannot animate the background-image as it is a non-animatable property https://www.w3.org/TR/css-backgrounds-3/#the-background-image
Add IE=edge to your X-UA meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Your site takes over 3 minutes to load with a 4 Mb/s connection (in all browsers)... the target is 3 seconds.
See http://developers.google.com/speed/pagespeed for some tips (compress your slideshow images, resource cache, etc.) and http://modern.ie/report
You may also like to look up what the bounce rate for similar sites is at http://alexa.com. Usually your hosting provider is able to provide you with some basic site statistics. I would expect that the site has a very high bounce rate and a short visitation time.
Honestly.... it's a dogs breakfast there.... Instead of third-party hosting, you should also consider dedicated hosting with your own server instance.
I'm currently rendering a list of HTML5 video elements.
I have multiple video files on a single page, i do not want to download a lot of data until the user clicks play.
I would like to grab frame 1 and show it as the poster. I dont have access to an alternative posters for each video.
I'm looking at the preload attribute with a value of 'metadata' for the video element here:
http://www.w3schools.com/tags/att_video_preload.asp
This looks to have limited browser support.
Using preload='metadata' works in firefox and chrome and show frame 1 as a poster.
Using preload='metadata' disables preloading in safari, but disabled the poster.
I have been unable to test in IE.
How do i show the HTML5 video elements frame 1 as a poster, in safari, without preloading a large chunk of data.
<video controls preload='metadata'>
<source src="{{video.url | trusted}}" type="video/mp4">
Your browser does not support the video tag.
</video>
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday - so not yet available)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
I am displaying a set of properties on Bing map. It works all fine in Chrome, FireFox, IE, and Safari on Windows (version is 5.1.7 - their latest version for Windows). But it doesn't work in Safari 7 on Mac.
When displayed correctly, all properties are located on a green residential area. But on Safari 7, all properties are displayed on the far left of that area - on a totally wrong location. Also, the larger left part of the map is blank (there is no map!).
I saw a similar post Bing Maps Issue on Safari 7. The left part of their map is also blank. The problem there seems not solved. I followed Microsoft's guideline (meta, CSS position/width/height etc), none of them work.
I suspect that's a Bing bug? Or a Safari bug?
Sorry I don't have enough reputation to post images...
Now that I solve the problem, I confirm that this is NOT a bug of Safari or Bing.
the <div> that load the the map is embedded in many other divs, panels, fieldset, Telerik ajax panel, RadTabStrip etc. You have to remove some of divs, and also some styles of divs to make it work. It's tricky, you have to do many tests to finally pin down which element caused the problem and remove that element.
I took me several days to figure this out.
I'm trying to use MediaElement.js for an embedded player with subtitles, but it just says "English (loading)" and doesn't actually show the subtitles.
I'm using the pre-made track demo and it doesn't even work.
I created another page that uses the code from the MediaElement.js home page and it doesn't work, either.
Interestingly enough, the MediaElement.js track demo page DOES show the English subtitles, correctly, but DOES NOT do the translation that the code says it should.
Does my web server need a mime-type set for .srt and .vtt? The documentation doesn't say anything about it (video mime-types are mentioned).
It's mentioned here that jQuery version might be the issue.
I ran into the same problem recently and found out that this occurs when one forgets to set the srclang property on the track node..
Make sure to add it (in this case: dutch subtitling):
<track id="subtitles" kind="subtitles" label="Ondertitels" src="mysubs.srt" srclang="nl"></track>
Wondering if the ID has to match the name of the video OR not be in there at all, but having problem getting videos to work on pages that contain more than 1 video. 1 works not problem, 3, does not..here is the link http://www.clarkekoi.com/video-blog.html....a solution greatly appreciated...thanks. Randall
i would check your webM files again. is the source right in your brwoser, and do the videos work (just click 'n drop them from your hard drive in your firefox). your code is working as you can see in chrome and safari, which take the mp4 source, so i m quite sure the webM videofiles are broken?!