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
Related
I'm trying to auto-run, un-downloadable, muted-video in the loop, on my website, I already have visited multiple relevant and similar queries here and around but none of the fixes worked for me especially for Safari, chrome is playing well. I have my HTML as
Tags in the code below I have already tried
<video oncontextmenu="return false;" width="100%" height="50%" autoplay loop muted playsinline controlsList="nodownload" name="media">
<source src="images/portfolio/modals/work/Bookflip.mp4" type="video/mp4;codecs=avc1.42E01E, mp4a.40.2">
<p>Your browser does not support HTML5 video.</p>
</video>
Chrome is working alright, Safari is not. I'm using Safari 12.0.2
Have you tried being less specific with the type value? i.e. using type="video/mp4" instead? This is only giving a hint to the browser of course but being so specific may cause it to not work.
Also what in particular is not working? The video doesn't play at all? The auto playing isn't working? The looping?
As title, my website is using html 5 video videojs.com to play video.
It works fine in chrome, fire fox. But it does not auto play when I use other tab.
I don't understand when you say "when I use other tab", however if you wish to auto play you have to use the attribute autoplay like this:
<video id='last' class='video-js vjs-default-skin' controls preload='metadata' autoplay > <source src='../videos/P04A.mp4' type='video/mp4'> <source src='http://video-js.zencoder.com/oceans-clip.webm' type='video/webm'>
PS: I post as a response because I can't comment (you know reputation and all...), but I will edit as soon as you specify
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.
<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 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...