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?
Related
Is there a way on VUEJS to autoplay multiple HTML5 videos together after all loads?
They have "autoplay" attribute but are playing with some lag.
<div
class="video-box"
v-for="(item, index) in videoArr"
:key="index"
#click="playVideo"
>
<video
class="video-box img-absolute"
muted=""
loop=""
playsinline=""
autoplay
:poster="item.poster"
>
<source :src="item.src" type="video/mp4" />
</video>
</div>
I think the lag comes from your browser or internet connection. Under normal conditions all videos should load and start at the same time, but when you get lag it comes from your interenct connection or browser.
A solution might be to load the videos async and then display them, or you could clean your browsers cache. this might make it a bit faster while loading. Also try out another browser, sometimes specific browsers handel videos or data agregation differently so compare another browser to your current one.
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).
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
<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 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