Background
I am working on a HTML5 video comparison slider. By default, 50% of one video is displayed over the top of a second. The user can move the slider in the middle of the two videos left or right to see more or less of the videos. Both are set to auto play and loop continuously.
However, this functionality does not work well on mobile so I have decided that it would be better to display images instead of videos for mobile devices.
Problem
I know that I could use a media query or JavaScript to detect small screen sizes and switch the content. However, I need to target the device not screen width. Is there a reliable way to achieve this?
<div class="slider-video__container">
<div class="slider-video__content">
<video autoplay loop playsinline muted>
<source src="/img/slider-video/Fragment_02_Light.mp4" type="video/mp4">
</video>
</div>
<div class="slider-video__seperator">
<span class="slider-video__handle"></span>
</div>
<div class="slider-video__content">
<div class="slider-video__content--resize">
<video autoplay loop playsinline muted>
<source src="/img/slider-video/Fragment_01_Dark.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
Best method is to use media queries.
Yo can check other navigator or enviroment variables to check what is the device but not are 100% reliables.
Exist more methods to detect the device, it uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.
Here is an simple example for User-Agent comprobation with JS:
if(! navigator.userAgent.match(/Android/i) &&
! navigator.userAgent.match(/webOS/i) &&
! navigator.userAgent.match(/iPhone/i) &&
! navigator.userAgent.match(/iPod/i) &&
! navigator.userAgent.match(/iPad/i) &&
! navigator.userAgent.match(/Blackberry/i) )
{
// do desktop stuff
} else if ( navigator.userAgent.match(/iPad/i) )
{
// do tablet stuff
}
You can verify this from several languages, but there are many options available already developed.
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>
Wonder if you can help. I've been trying to add background mp4 to a WordPress site I am developing for a client. I've explained that its a bad idea due to data usage but he is insistent.
When I added the mp4, I quickly understood that by default this action isn't supported. However, there must be a work around. I have read the posts here and googled extensively.
so far, what I've come up with is using #media to resolve.
#media screen and (min-width: 600px) {
.header-video {
display: block !important;
}
}
However, this doesn't seem to work either. Other than creating a gif is there any other way?
Additional HTML Code: -- I am interested in the video loop tag with the MP4 in
<div id="main-content">
<article id="post-54" class="post-54 page type-page status-publish hentry">
<div class="entry-content">
<div id="et-boc" class="et-boc">
<div class="et_builder_inner_content et_pb_gutters3"><div class="et_pb_section et_pb_section_0 header-video et_pb_section_video et_pb_preload et_pb_with_background et_section_regular">
<span class="et_pb_section_video_bg">
<video loop="loop" autoplay playsinline muted >
<source type="video/mp4" src="http://fortuna-x.com/wp-content/uploads/2018/07/Deep-Network-Green-Blue.mp4" />
</video>
</span>
<div class="et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_1_3 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et_pb_column_empty">
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_2_3 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child et_pb_column_empty">
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters150">
<div class="et_pb_column et_pb_column_1_3 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough">
As of April, 2018. Chrome Autoplay policy has changed. In order to autoplay your videos on the site, you're media engagement score needs to be high. Examples from the docs.
Example 1: Every time a user visits VideoSubscriptionSite.com on their
laptop they watch a TV show or a movie. As their media engagement
score is high, autoplay is allowed.
Example 2: GlobalNewsSite.com has both text and video content. Most
users go to the site for text content and watch videos only
occasionally. Users' media engagement score is low, so autoplay
wouldn't be allowed if a user navigates directly from a social media
page or search.
Example 3: LocalNewsSite.com has both text and video content. Most
people enter the site through the homepage and then click on the news
articles. Autoplay on the news article pages would be allowed because
of user interaction with the domain. However, care should be taken to
make sure users aren't surprised by autoplaying content.
Example 4: MyMovieReviewBlog.com embeds an iframe with a movie trailer
to go along with their review. The user interacted with the domain to
get to the specific blog, so autoplay is allowed. However, the blog
needs to explicitly delegate that privilege to the iframe in order for
the content to autoplay.
To check weather you're media score is high enough you can check it like this.
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
So, if you get an error, you can show the play button. The user would then need to click on it to start the video.
Best way is u can use any wordpress plugin for adding video background for mobile...
like https://envato.com/blog/plugins-video-backgrounds/
I found a solution here:
https://wordpress.org/support/topic/video-settings-twenty-seventeen-theme/
After creating children them it’s enough to add these code lines to the file functions.php:
/*
* Change the minimum screen size to use the video header
*/
function twentyseventeenchild_video_size( $settings ) {
$settings[‘minWidth’] = 100;
$settings[‘minHeight’] = 100;
return $settings;
}
add_filter( ‘header_video_settings’, ‘twentyseventeenchild_video_size’ );
it works!
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 to get a html 5 video to play on mouseover. It works fine in firefox and safari just in chrome the video blanks out when i hover and becomes visible only after i hover on another element on the page....
This is the site: www.manart.de
This is the code:
<div id="wrapper">
<video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop>
<source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source>
<source src="fileadmin/schiffchen.mp4" type="video/mp4"></source>
</video>
</div><!--end wrapper-->
<script src="fileadmin/js.js"></script>
And this is the js:
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('video-example');
function hoverVideo(e)
{
if(e.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}
}
Thanks for helping!!!!
It's a bit odd that, but if you remove the poster frame (I also made sure that the hideVideo method was defined to avoid an exception being thrown) it works (fiddle).
I tried using a JPG instead of a PNG for the poster frame with the same results (fiddle). And when you substitute your video for one with sound, it's apparent that the video is playing, but that it's invisible (fiddle).
Looks like a bug in Chrome to me but Google didn't throw much up when I searched (maybe my terms were wrong).
The quick fix, therefore, is probably to simply remove the poster frame which, since Chrome will display the first frame of the video when it has loaded, is probably pretty close to what you're looking for anyway.
Update:
Alternatively, you could use the hack detailed in this thread on a similar issue which involves dynamically adding controls to the player before playback starts and removing them again immediately (fiddle). The author has confirmed the issue as a bug in Chrome by verifying that it does not occur in Chrome 19.
HTML:
<div id="wrapper">
<video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop>
<source id='mp4'
src="http://www.manart.de/fileadmin/schiffchen.mp4"
type='video/mp4'>
<source id='ogv'
src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv"
type='video/ogg'>
</video>
</div>
JavaScript:
var vid = document.getElementById('video-example');
// add the listener directly to the video element
vid.addEventListener('mouseover',hoverVideo,false);
function hoverVideo(e) {
if (vid.getAttribute('controls') != 'true') {
vid.setAttribute('controls', 'true');
}
vid.play();
vid.removeAttribute('controls');
vid.addEventListener('mouseout',hideVideo,false);
}
function hideVideo(e) {
// do whatever you were going to do here, but omitting
// the method completely causes an exception
//vid.pause();
// clean up the listener when finished
vid.removeEventListener('mouseout', hideVideo);
}
I was wondering if it's possible to set the width of the audio tag. It is not a supported feature by default, so "hacks" will be happily accepted.
I already tried putting them in small div's and tables, but that doesn't look very smooth... As far as I can see, I'm the only one bothering about it, but I really appreciate some help
There is no need for cross-platform/browser support; I'm happy as long as FireFox (3.6 ++) supports it.
Quick example as to what I'll be using:
<audio preload="auto" id="id12" controls="controls" onended="func12();" src="http://192.168.1.68/mymusic.wav"></audio>
Set it the same way you'd set the width of any other HTML element, with CSS:
audio { width: 200px; }
Note that audio is an inline element by default in Firefox, so you might also want to set it to display: block. Here's an example.
For those looking for an inline example, here is one:
<audio controls style="width: 200px;">
<source src="http://somewhere.mp3" type="audio/mpeg">
</audio>
It doesn't seem to respect a "height" setting, at least not awesomely. But you can always "customize" the controls but creating your own controls (instead of using the built-in ones) or using somebody's widget that similarly creates its own :)
You also can set the width of a audio tag by JavaScript:
audio = document.getElementById('audio-id');
audio.style.width = '200px';
You can use html and be a boss with simple things :
<embed src="music.mp3" width="3000" height="200" controls>