I have this code that is just a funny troll video, but I don't know if you are able to make a video autoplay or if it needs to be manually clicked on by the user.
<div id="banner">
<h2><strong>Welcome To My Portfolio!</strong>
<br /> My Name is <span style="color: red">John</span>, and I am excited
to meet you!</h2>
<p>Does this statement make you want to click the big shiny button?</p>
<a href="https://youtu.be/eBGIQ7ZuuiU?t=1" target="_blank"
class="button large icon solid fa-check-circle">Yes it does</a>
</div>
I tried just adding an autoplay feature to the end of the tag, as well as trying it in other spots but I am just not quite sure.
<video autoplay>
<source src="https://youtu.be/eBGIQ7ZuuiU?t=1" type="video/mp4">
Your browser does not support the video tag.
</video>
Related
Goal:
I am trying to implement a control with as little code clutter as possible that will allow the change of quality of a video.
Preferences:
The following is what I am given, and I would rather work around it. I am open to using pre-built plugins or a javascript/jquery hack, but would rather not go for a solution that involves reinventing (me or you) the wheel (require the building of a custom video control scheme), but would take it as a last result.
EDIT:
Sorry. Did not mean to have that correlation, as the urls did not reflect any sort of pattern. I oversimplified it, not assuming people would look at the urls for a pattern. But thank you for that start, as I can probably work with that. Sorry again. I will change the urls to not have any pattern.
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
Thank you in advance for anybody who can give some insight.
Sorry for asking. Turns out I was able to solve it pretty much all by myself. Hate those moments. Here is the solution I came up with, which just involves copying the <source> I need based on the label attribute, deleting it, and prepending it into the <video> element:
HTML
<div class='vidcontainer'>
<select class='qualitypick' autocomplete='off'>
<option selected>fullHD</option>
<option>720p</option>
<option>360p</option>
</select>
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
</div>
JQUERY
$(document).ready(function(){
$('.qualitypick').change(function(){
//Have several videos in file, so have to navigate directly
video = $(this).parent().find("video");
//Need access to DOM element for some functionality
videoDOM = video.get(0);
curtime = videoDOM.currentTime; //Get Current Time of Video
source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source
source.remove(); //Remove the source from select
video.prepend(source); //Prepend source on top of options
video.load(); //Reload Video
videoDOM.currentTime = curtime; //Continue from video's stop
videoDOM.play(); //Resume video
})
})
Although this was not my intention, I hope my answer is of some use. Sorry again for asking before thinking it through.
You don't need many source tags. One is enough, however, you need to change the value of the source attribute, which is src.
var map={'fullHD':'1080p','720p':'720p','360p':'360p'};
function changeQ(quality){
$('source','video#player').attr('src','http://v.com/'+map[quality]);
$('span#pp').html(map[quality]);
console.log($('source','video#player').attr('src'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
(<span id="pp"></span>)</button>
<ul class="dropdown-menu">
<li>FullHD</li>
<li>720p</li>
<li>360p</li>
</ul>
</div>
<video id="player" width="400" controls>
<source src="http://v.com/1080p" type="video/mp4">
</video>
I added my bootstrap website for the video
but when I right click and tried to open new tab on this video, new tab option disabled, any solution to enable this option??
Thanks
here the code
<video autoplay="" target="_blank" class="header-index__video" loop="" muted="" playsinline=""
src="assets/video/Home.mp4" style="width:100%"></video>
I think there is no other choice but instead placing a thumbnail of the video, then wrap it with anchor tag with href value of the targeted video. It does exactly what you are expecting. Something like this:
<a href="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" target="_blank">
<img src="https://picsum.photos/200/300">
</a>
So I followed this guide to a T on how to create a background banner video in a rails project. I've got it to show up on my home page the way I would like, but the autoplay is not working. I've tested out the other attributes, like loop and mute, and they work just fine. I read the rules that chrome has for autoplay regarding mute, and also tried the script tag using the javascript play method. Nothing appears to be working.
The only way I can get the video to play is if I add controls and then hit play, which is not the functionality that I am going for.
Does anybody know of anything else that might be holding up autoplay other than mute?
Here is my erb tags in my project
<div class="video-wrapper">
<%= video_tag "type.mp4", mute: true, autoplay: :true, loop: true, class: "banner_video" %>
<h1>Cheesy, inspiring coding caption here</h1>
</div>
I have also tried:
<div class="video-wrapper">
<%= video_tag "type.mp4", mute: :mute, autoplay: :autoplay, loop: :loop, class: "banner_video" %>
<h1>Cheesy, inspiring coding caption here</h1>
</div>
And here is what it converts to:
<video mute="true" autoplay="autoplay" loop="loop" class="banner_video" src="/assets/type-7f0bdd6a4a5fe55ee8eefe5842020765eb1a05d78f50ca8279ed8b2e605c09ba.mp4"></video>
Can you try to embeded the video in this way?
<video id="player" autoplay loop muted>
<source src="video.mp4" type="video/mp4" />
</video>
For me, autoplay is working fine in Firefox.
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 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.