I have been searching the web for a few days now with no solution. I am aware that there used to be an issue with Video.js, but apparently it was fixed in 2014 with v4.7.0 and I'm running v4.12.3. I've checked everything and can't find any issues with my code. Subtitles work but Chapters don't show up at all.
My VTT: (chapters.vtt in the /public/ dir)
WEBVTT
Chapter 1
00:00:54.000 --> 00:02:46.000
What did you work on at your previous jobs?
Chapter 2
00:02:59.000 --> 00:04:25.000
When did you get started with programming?
Chapter 3
00:04:30.000 --> 00:05:35.000
What is prototypal inheritance?
Chapter 4
00:05:35.001 --> 00:09:48.000
Why is prototypal inheritance better than classical inheritance in JS?
I added the MIME type to Nginx and the file is loading properly.
My view:
<video id="video" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="428"
data-setup='{ "playbackRates": [1, 1.35, 1.5] }'
poster="...path_here">
<source src="...path_here" type='video/mp4' />
<track kind="chapters" src="/chapters.vtt" srclang="en" label="Chapters" default="default">
</video>
<link href="//vjs.zencdn.net/4.12.3/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12.3/video.js"></script>
<script src="/js/plugins/video/videojs.ga.min.js"></script>
<script>
var interviewVideo = videojs('video', {}, function() {
this.ga(); // load the Analytics plugin
});
</script>
I've tried just default, no default, Chapters, chapters, no Chapter in the VTT file, no hours in the VTT file. Nothing happens at all, except when I change it to subtitles. Then everything works fine.
Thinking about opening an issue on github, but this wouldn't be the first time I've overlooked something stupid.
Thank you for your time and help.
It's an issue with the plugin: https://github.com/videojs/video.js/issues/2131
Use 4.11 if you need chapters.
Related
Should both of these code blocks be used?
Should only one code block be used? If so, which one?
code per video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
code per amp-video-iframe
function onAmpIntegrationReady(ampIntegration) {
var myVideo = document.querySelector('#my-video');
ampIntegration.listenTo('videojs', myVideo);
}
amp-video-iframe is not supported by amp-story. The supported tags, depend on what type of layer you are using, but for amp-story-grid-layer they can be found here. Notably, if you are looking to play video, amp-video is currently the only way to do it. Since amp-video-iframe supports AMP's video interface, you can see this GitHub issue to track the implementation/support for this feature.
But, to answer your question (as it is relevant for AMP pages that are not stories): both snippets are necessary. The first code snippet adds the video to the page, while the second code snippet listens for events like play and pause to communicate them back and forth to the AMP runtime. Note that you'll need to make sure that the IDs are the same (in the code you've posted, the HTML refers to the video by the ID my-player, while the JS refers to the video by the ID my-video).
<video id="example" class="video-js vjs-default-skin" controls preload="auto" width="511" height="382" poster="" data-setup="{}">
<source src="" type="video/mp4">
</video>
<script>
I want to able to load the source for an mp4 using JavaScript using two different sources. One will be the default, and the other will be fallback in case the first source is down. I'm using videojs version 4.7, and I have multiple videos. All of the sources will be coming from one JavaScript.
I have made an HD toggle plugin for video.js in which I have used JavaScript to load sources.
I think this fiddle would surely help you. It's used just as simply as that:
HDtoggle('http://video-js.zencoder.com/oceans-clip.mp4','http://video-js.zencoder.com/oceans-clip.mp4');
You can modify the library in fiddle according to your needs.
I'm having a real hard time trying to trouble shoot this issue. I've seen others with the same problems but all seemed to find a fix, none of which work for my clients site. I've tried a number of different combinations but nothing works.
The site is completely responsive on desktop, android, and IOS6 / below, but after the release of IOS7 it no longer displays correctly on any of the IOS7 browsers and defaults to the desktop layout (although fits all on the screen, still not ideal). It's like it's ignoring the viewport settings for retina.
The website in question is www.grupoevents.com
I really appreciate any help as I've already spent hours trying to fix it!
This is probably the 6th variation of viewport I have tried now, still not working :(
What combinations have you used? I have used this in the past and it works for me.
<!-- standard viewport tag to set the viewport to the device's width, Android 2.3 devices need this so 100% width works properly and doesn't allow children to blow up the viewport width-->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<!-- width=device-width causes the iPhone 5 to letterbox the app, so we want to exclude it for iPhone 5 to allow full screen apps -->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
There is in fact an extra meta tag. Here it is and here's its id. <meta name="viewport" id="sv-meta" content="">
It doesn't show up on desktops, so it's probably being generated by this script <script type="text/javascript" src="http://grupoevents.com/wp-content/plugins/wp-simpleviewer/svcore/js/simpleviewer.js?ver=2.3.2.1"></script>. You should look into the settings for that plugin, but if you can't find any, then you might be able to use this javascript at the end of your header:
<script type="text/javascript">
var svMeta = document.getElementById('sv-meta');
if(svMeta){ svMeta.parentElement.removeChild(svMeta) }
</script>
I am at a complete loss here. Any help would be greatly appreciated.
I can get the video to play in Chrome, Mobile devices, etc. But in IE...nothing happens when I click on the video.
Here is the link to my sandbox page: https://datacentral.esboces.org/Developers/StagingArea/Sandbox.aspx
If I open the Developers Toolbox and debug the javacode I see the following appears every time I click on the video:
LOG: Video Error [object Object]
LOG: Flash Errorsrcnotfoundexample_video_1_flash_api
Any ideas??
-Ben
Ok, I figured out my problem, thank you to those that looked into this. The problem stemmed from the CMS that is being used. The HTML editor (By Telerik) by default takes "some" HTML tags and reformats them.
What I didn't realize was that it was taking my original code from this:
<video id=example_video_2 class="video-js vjs-default-skin" preload="none" poster="getting_started_project2.png" data-setup="{}" controls="controls" width="640" height="360">
<source src="getting_started_project2.mp4" type="video/mp4">
</video>
...and was changing it to this (terminating my tags prematurely):
<video id=example_video_2 class="video-js vjs-default-skin" preload="none" poster="getting_started_project2.png" data-setup="{}" controls="controls" width="640" height="360" />
<source src="getting_started_project2.mp4" type="video/mp4" />
I had to figure out how to disable that stupid tag reformatting and TADA...it works... I don't know how much hair I lost from pulling it out over this problem...
I'm using video.js with mp4 files, it works fine in chrome, but only runs properly on every other video (even ones, not odd ones)
My code is formatted like this
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="video_1" class="video-js vjs-default-skin" controls data-setup="{}" width="580" height="317">
<source src="/path/to/file.mov" type="video/mp4">
Video tag not supported.
</video>
Making the video an absolute link does not work, self closing or normal closing of the source tag does not work, removing "Video tag not supported." does not work. The only work around I have right now is to load an empty video tag before each actual video and then hide it with css.
The videos that fail to load have a div with the same attributes as my video tag, a fluid-width-video-rapper div inside that, and a swf object, but none of the vjs divs