I have a parrallax slider, I have put just image and description on slider, and I want to add a video, this is my code:
{ <div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Vidéo PUB</h2>
<p>loading</p> <!--wanna put the video here -->
</div>
<div class="da-slide">
<h2>Affréteurs</h2>
<p></p>
<div class="da-img"><img src="" alt="" /></div>
</div> }
My problem is the video is static.
I'm currently using this slider:
Yii2 Da-Slider
I want to:
Add it to the first slide
Set it so it autoplays
After the video finishes playing I want the slider to automatically resume and move to the next slide.
How can I do this?
I would recommend setting up a YouTube account to host your video on.
If the site is popular then it offloads the strain of serving the video file over to YouTube's fast, dedicated servers.
Once you have got your YouTube video uploaded you can add it to the slide by clicking the Share button beneath the video and then clicking Embed. This will give you a snippet of code like this which you can use in your slider code above:
<iframe width="560" height="315" src="https://www.youtube.com/embed/_dJCLaoBZvM?rel=0" frameborder="0" allowfullscreen></iframe>
Notice the rel=0 on the end. That stops it suggesting other videos once yours has finished playing which makes the whole thing more professional. You can also add autoplay=1 if you want it to start playing straight away. There are also more advanced integrations that you can do where you control the chrome of the video player (the skin around the edge).
I've done this before with parallax and it comes out looking amazing.
I prefer this method to a service like Youtube or Vimeo because you have more control and be able to style it how you want more effectively.
You want to get your video in mp4 and ogg format. You can do this with VLC media player. It's free.
Then I used the html5 <video> tag (Link Here). here is a sample. You will want to style for position, etc... in your CSS.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Related
I am using html5 and while the video is downloading I am using a fallback image in poster attribute. but the problem is once the video is downloaded a flashy screen is showing for a short period of time. how can I remove this, so that the flash will not visible?
<video class="bg-video" loop="" muted="" autoplay="" playsinline="" poster="https://i3.ytimg.com/vi/Zs0bsagDzw8/maxresdefault.jpg">
<source />
</video>
live site:
https://nordic.dnscheck.io/
If you mean the black frame, it's in your video so you should edit it out from there.
If you really can't edit that file anymore you can still kind of workaround that by using the media fragment syntax and make your video automatically seek to after that black frame:
<video muted loop autoplay
poster="https://nordic.dnscheck.io/bilder/poster.webp"
src="https://nordic.dnscheck.io/nordic.webm#t=0.8"
></video>
However beware that the black frame will still be here at the next loop.
Also, while it's not an issue for you since you do autoplay the video, one should note that (currently) setting the seeking time through the media fragment syntax will disable the poster once the video has loaded.
Very important i don't have a img in api. I need to set preview thumbnail in video.
<video style="object-fit: contain;" width="100%" height="100%" controls preload="metadata"
[poster]="indexOfSelectedExercise.exercise?.fullVideoUrl" loop>
<source [src]="indexOfSelectedExercise.exercise?.fullVideoUrl" type="video/mp4" />
</video>
fullVideoUrl: "https://www.url.com/images/Screen Recording 2020-12-01 at 19.01.52.mov"
this is example of url
If you don’t have an image, then don’t specify poster, that does not make sense. (This expects an image format, so just giving it your video file URL, is pointless.)
You can only set preload to auto then, hope that the browser starts loading the video, and will use the first frame to present a preview once it is available.
(That this might come with traffic/bandwidth and maybe even performance issues, if this was used for large videos, or multiple videos on a page, should be clear.)
H!
I have to achieve the same effect with background video in "hero" section (first below navbar) as on the given page: https://www.invisionapp.com/. Do yo have any idea what I could use if I have video in mp4 format? And also it should behave the same way as on the page - plays in full screen modal when click "play" button. Any video service provider, javascript library recommended?
Thanks in advance!
Best regards!
About the background video you could you a video tag with a z-level in css.
The z-level will put it a layer below whats above.
For example:
<video autoplay loop muted style="z-index: -1;">
<source src="video.mp4" type="video/mp4">
</video>
But I am not sure how to implement the full screen modal, unfortunately.
I scraped some videos, and displayed them with iframes. That works well, however, I am now looking for a way to control these videos on my react app.
What i mean by control is for instance: pause, play, currentTime in video...etc.
I have tried several things so far.
html5 tags, but it does not work mp4 video link that I have.
A few packages, like jplayer or player.js.
I am pretty sure I can achieve my goal, I guess I just need to find the right tool.
EDIT: Here is a example of my code with video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="https://openload.co/embed/myvideo" type="video/mp4"></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>
Take a look at video.js. It will give you a complete control over your video playback. Take a look at their advanced examples.
Also, you don't need iframes to work with videos. If that is a design decision then it's fine but you can do video embeds without iframes.
To control video player instance via js refer to following
JS
var myPlayer = videojs('example_video_1');
HTML
<video id="example_video_1" data-setup="{}" controls="">
<source src="my-source.mp4" type="video/mp4">
</video>
Then you can control the player instance like following
myPlayer.play();
myPlayer.pause();
myPlayer.currentTime(120);
Please look at the player API in the following link
https://docs.videojs.com/docs/api/player.html
Please look at react component implementation in the following link
https://docs.videojs.com/tutorial-react.html
I'm trying to use VideoJS in a website I'm developing (http://videojs.com/), however I'm trying to load a simple YouTube video on the page for testing purposes but still not working:
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<div style="position: absolute; top: 50px; left: 600px; display:none">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>
<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/webm'></source>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
MP4,
WebM,
Ogg<br>
<!-- Support VideoJS by keeping this link. -->
HTML5 Video Player by VideoJS
</p>
</div>
<div style="clear:both;"></div>
</div><!--main-->
And on the of the page I have:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Any clues what's going wrong here? I was expecting to be able to load and play that video on my page.
Don't use Youtube video to test videojs, since it's hard to find a direct link to the video source. Check this out this question.
The code your provided links to the youtube page not to video source.
<source src="http://www.youtube.com/watch?v=ehjDXDVpLgo" type='video/mp4'></source>
The video source might be hidden in here but I'm not sure. Use your own videos hosted on your site to test.
But if you still want to use youtube videos then check out the Video.js forum, where someone provides code for a workaround.
An easier way to embed youtube videos would be to click the "share" then "embed" tab under a video page and copy and paste the code on your site.
Which would give you something like this.
<iframe width="560" height="315"
src="http://www.youtube.com/embed/gZKXrLjCwa8"
frameborder="0" allowfullscreen>
</iframe>
Also I would suggest reading the Video.js documentation again on how to setup.