I need a thumbnail in my videogular2.
I want to create a thumbnail/poster for my video. Currently it only shows a play/pause button with black screen and vg-poster is not working.
Here is my code:
<vg-player>
<vg-overlay-play></vg-overlay-play><vg-controls vg-autohide="false">
<vg-play-pause></vg-play-pause>
<vg-mute></vg-mute>
</vg-controls><vg-poster vg-url="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg?itok=RUilemL3"></vg-poster>
<video height="200px" width="100%" [vgMedia]="media" #media src="{{server_path}}{{imgVid.data_path}}" id="singleVideo"
autoplay></video>
</vg-player>
The HTML 5 video tag has a poster attribute. From w3Schools:
specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
In your example it would look like this:
<video
poster="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg"
height="200px"
width="100%"
[vgMedia]="media"
#media
src="{{server_path}}{{imgVid.data_path}}"
id="singleVideo"
autoplay>
</video>
Related
I am developing a website where-in, i want a youtube video to be played when i click on the image. I don't want to go to the new tab for playing the video.
And I want the video to be placed exactly in the background of the image. When i click the image, the video should be played hiding the image.
Can anyone suggest me how to achieve this using html, css
You can simply add a property, which you can set as a boolean or any. Then you can create a method() to change the value of that property by clicking.
export class AppComponent {
isVideo : any = {};
OnChange(){
this.isVideo = !this.isVideo
}
}
Then in the template you can make 2 divs. One div contains your image. Other will contain video. Then you can use *ngIf="isVideo" to switch the div on click.
<div class="video" *ngIf="isVideo">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt=""
(click)="OnChange()"
/>
</div>
<div class="video" *ngIf="!isVideo">
<iframe
src="https://www.youtube.com/embed/OP7IdmB9Dlg?autoplay=1&loop=1&autopause=0&muted=1"
allow="autoplay"
width="640"
height="360"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
>
</iframe>
</div>
Here is the working Demo.
Note : You can also disable the autoplay function of the video if you want.
I have this code inside
and I have the .css the class myvideo (It doesn't need this code ),it is the design.
What I want to know is ,how can I do pause and unpause this video.I try to stop my video and I didn't manage it.If you could help me with it I will be greatful.Thanks
<div class="myvideo" style="left: 6px; top: 0px">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="exr.mp4" type="video/mp4">
</video>
If you want to have control over a video element you must use JavaScript to control it. Here's a great example of how to control a video object from JavaScript: https://www.w3schools.com/tags/av_met_pause.asp
You may need to add another HTML element to control your video. This element must listen to a click event. After that, you will be able to do what you want with the video.
const videoEl = document.getElementById("video-bg-elem");
// Will play the video
videoEl.play();
// Will pause the video
videoEl.pause();
I have a page on which there are multiple videos (informational site). I use the basic HTML/CSS player markup - no Javascript/jQuery. I just don't know enough about either.
My posters show up for each video when the page itself is refreshed, but once a video is played (or paused) the poster does not reappear. Is it possible to recall the poster somehow as part of the simple HTML player - or is the only choice to try to find Javascript/jQuery code and try to make it work?
TRIED THIS - but still no change
<div id="video-player">
<div id="video-tree">
<video id="myVideo" poster="someImage.png" width="430" height="250" controls>
<source src="videoONE.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="video-player">
<div id="video-tree">
<video id="myVideo" poster="someImage.png" width="430" height="250" controls>
<source src="videoTWO.mp4" type="video/mp4">
</video>
</div>
</div>
Then the function I am trying to use is the one mentioned in first comments.
<script>
var vid=document.getElementById('myVideo');
vid.addEventListener("ended", resetVideo, false);
function resetVideo() {
// resets the video element by resetting the source
this.src = this.src
}
</script>
Tried the option in the first answer submitted but that made no change either. Am I understanding actually what has to happen? When the page loads, and someone clicks on the video, the variable vid is capturing that specific element id and then waiting to get an "ended" event. When the video ends, that event occurs, then the "resetVideo" function runs. It resets the src (videoONE or videoTWO) and if all is working properly, the initial screen of the video should reappear. Am I right in understanding that this function doesn't actually touch the poster - it is really just resetting the video. So if the actual video first screen is a blue screen - that's what people would see - and not the original poster/splash screen - right? So is it the poster I actually need to reset?
Edit
When you have more than one video, getElementById() will not work for all of them, it's designed to access only one element because an id is unique. You cannot have 2 videos with the id of myVideo, you cannot have 2 divs with the id of video-player, nor can you have 2 divs with the id of video-tree. Change the div ids into class and the myVideo into myVideo1 and myVideo2.
You must either add an event to each video which is wasteful and redundant, or you can collect the videos into a list (an array, NodeList, etc).
Snippet 2 will:
Collect all 4 video elements into a NodeList and convert it into an array.
Using the array method forEach() it will take each video in the array and add an eventListener to it (a little wasteful but if I make more efficient it'll be more complicated).
See Snippet 2
Old
I don't recall any way to invoke the poster attribute without JavaScript. But it looks as if you already use JavaScript anyhow so you need to use the .load() method.
Snippet 1
var vid = document.getElementById('vid');
vid.addEventListener('ended', function(e) {
this.load();
}, false);
<video id='vid' poster="http://placehold.it/430x250/0e0/111?text=POSTER" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" type="video/mp4">
</video>
Snippet 2
<div class="video-player">
<div class="video-tree">
<video id="myVideo1" poster="http://placehold.it/430x250/000/fff?text=POSTER I" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="video-player">
<div class="video-tree">
<video id="myVideo2" poster="http://placehold.it/430x250/0ff/000?text=POSTER II" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005610.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="video-player">
<div class="video-tree">
<video id="myVideo3" poster="http://placehold.it/430x250/e00/fff?text=POSTER III" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="video-player">
<div class="video-tree">
<video id="myVideo4" poster="http://placehold.it/430x250/fc0/000?text=POSTER IV" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" type="video/mp4">
</video>
</div>
</div>
<script>
var videos = Array.from(document.querySelectorAll('video'));
videos.forEach(function(vid, idx) {
vid.addEventListener('ended', resetVideo, false);
});
function resetVideo(e) {
this.load();
}
</script>
This is what worked - a combination of two of the suggestions above. A big thank you to #Offbeatmammal and to #zer00ne.
In the body:
<div class="video-player">
<div class="video-tree">
<video id="myVideo1" poster="someImage.png" width="430" height="250" controls>
<source src="someVideo.mp4" type="video/mp4">
</video>
</div> <!-- end video-tree class -->
</div><!-- end video-player class -->
Function
<script>
var vid=document.getElementById('myVideo1');
vid.addEventListener("ended", resetVideo, false);
function resetVideo() {
// resets the video element by reload of video
this.load()
}
</script>
I recognize that this is NOT an elegant solution for multiple videos on one page as it would require additional scripting to identify the video being called. We are ultimately resolving this "upstream" by insuring that, going forward, our media team creates the videos so that they do not end with a blank screen. For our videos that are older (limited number), this solution is working.
I'm trying create a site where there are multiple on video on one page, basically a new video will be on the bottom after one like the image shown below.
This is a two separate video, the problem is i cant find a way for all the video to have a standard size. both video has same width and height, here is the snippet:
src="file://D:/src1.mp4"
tabindex = "0" controls = "controls" loop ="true
width="320" height="240">
src="file://D:/src2.mp4"
tabindex = "0" controls = "controls" loop ="true
width="320" height="240">
What i see is the other video is not the same at all, what i just want it for both of them to have the same size both before and on playing.
Note: I not yet eligible to post an image
Add this, you can re-size it by changing height & weight-
<video src="file://D:/src1.mp4" tabindex = "0" controls = "controls" loop ="true" width="300" height="240"></video>
Few tag was missing from your code. Hope it works now!
I am unable to add div and video tags inside joomla 2.5.7 articles as when i am adding the div but content is not showing on live.
<div class="rightside">
<div>
<video width="900" height="550">
<source src="http://eb5mg.com/video/1.mp4" type="video/mp4">
</source>
<source src="http://eb5mg.com/video/eb5.ogg" type="video/ogg">
</source>
</video>
</div>
</div>
Try the below code
<div class="rightside">
<div>
<video width="900" height="550">
<source src="http://eb5mg.com/video/1.mp4" type="video/mp4">
<source src="http://eb5mg.com/video/eb5.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
I see this is an old topic but I went though this same problem. It has everything to do with Joomla and for me it came from two separate sources.
First there is a html word filter which is part of the global configuration which on defualt uses a black list to strip out many tags. I set the publisher and super users Filter Type to No Filtering but depending on your users and security needs you might want to be more strict (say like expand on the black list and only allow super user to have no filter).
Then is the wyswyg editor you are using for your articles. It also may be text filtering your html, TinyMCE which was my defaut editor also has options for stripping out code which you can adjust but after playing with it for a while I changed my users profile text editor to none.
After that my video tags worked and I imagine your div tags will work too.