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
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?
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 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