I'm currently working on a page for playing different videos when you click an element. While it works beautifully on the computer, of iOS devices it does not. The problem is that when the element, in this case a button, is clicked, it shows the video but does not start playing, as it should. The script is
$(document).ready(function(){
$('#video_1, #video_2').hide();
$('.icon_1').click(function(){
$('#video_2').fadeOut(function(){
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function(){
$('#video_1').fadeOut(function(){
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function(){
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function(){
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
and the html is
<button><div class="icon_1" id="mediaplayer" onclick="play">cadillac</div></button>
<button><div class="icon_2" id="mediaplayer2" onclick="play">nike</div></button>
<div id="video_1">
<video class="video_1" width="50%" height="50%" controls poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>
<div id="video_2">
<video class="video_2" width="50%" height="50%" controls poster="images/BKG_JohnGT.png">
<source src="images/01.mp4" type="video/mp4" />
</video>
</div>
It anyone could give me a function that could mak this happen, tht would be great
iOS does not support more than one video element in a page at one time. It doesn't even give you an error message - it will merely display the poster image (or first frame) and then fail to play, just as you describe.
Unfortunately, you can't do a true cross-fade, but you can come close. Start with only one video element attached to the DOM. When switching from one video to another, you can fade the current video out, and then when it's done, remove it and add the second video. Apple has provided some details and code samples on how to do this.
In theory, you should be able to grab a snapshot of the video frame in a canvas and swap that in for the video and fade the canvas out, but iOS doesn't support capturing video frames in a canvas either.
These and some other non-standard behaviors are described well in this article.
Related
My use case is simple as shown in this codepen for direct video tags
<section class="videowrapper videoTag">
<div class="gradient-overlay"></div>
<i class="fa fa-arrows-alt" aria-hidden="true"></i>
<video class="initial_video" loop="" controls="">
<source id="" src="https://d2cstorage-a.akamaihd.net/atl/Brunomars/Bruno-VersaceOnTheFloor.mp4" type="video/mp4">
</video>
</section>
The only difference is that I have a mix of direct video and iframe tags.
<div class="video-wrapper">
<iframe src="https://codepen.io/technotech/full/poRqdvN"></iframe>
</div>
i.e.
I have multiple iframes which have src URL as HTML/page (video are in this HTML/page). Once the page(containing multiple iframes and direct video tags) gets loaded, the user clicks on any one video(either direct video tag's video or iframe's video) to play and if it goes out of viewport then it should float.
if another video gets played while 1st one is floating, then 2nd video should replace 1st one on the float position if 2nd video goes out of the viewport
here is the codepen2 which I created for my use case. I tried the way used in the above codepen for direct video tags but it's not working for iframe HTML src videos as it's not able to inject events and id to those videos I guess.
please excuse me if I missed something.
i need help in php website.i am create website like online videos courses.i need help in video module.if playing any video and close it after some time and again play this video then need to play it where it can be stop or closed.
This video are getting from database not embedded video.for showing video i am using afterglow video player.
<video class="afterglow" id="myvideo" height="385px" width="770px">
<source type="video/mp4" src="adminpanel/video/<?php echo $results->c_video; ?>" />
</video>
Is there any script to solve this problem.
As suggested in the comments you have to save the position of your video somewhere. The most simple approach would be to use the localStorage. You can read more about localStorage in the official documentation: https://developer.mozilla.org/de/docs/Web/API/Storage
While the video is played the timestamp gets refreshed each second and the localStorage item is updated.
Then if you reload the page (remember: item still exists in the storage after a refresh) you check for its existence and set the video to the timestamp.
This should point you in the right direction.
let video = document.getElementById("example");
if (localStorage.hasOwnProperty("time")) { //if time was set before adjust the video to it
video.currentTime = localStorage.getItem("time");
}
let timer = setInterval(getTimestamp,1000);
function getTimestamp(){
localStorage.setItem("time", video.currentTime);
console.log(localStorage.getItem("time"));
}
<video id="example" width="320" height="240" controls>
<source src="yoursourcefile" type="video/mp4">
</video>
I am using videojs as the framework for a JavaScript video player page I am working on, its working great & I have customised the playback controls which are inside a div to match the spec I wanted (hide controls on load & then only show when the user has clicked play and has hovered etc).
I am now trying to make sure that the video player works when there is multiple instances on 1 page i.e if I add 4 or 5 videos to a page. the basic video.js functionality features seems to work fine but the additional control functionality which I have implemented will only work on the first instance of the video on the page (& thats because its just standard JS looking for that class & theres no unique ID per video player).
Here is what I have for the HTML:
<div class="cb-article-media__container padding-top-sm padding-bottom-sm">
<div class="cb-article-media__video-block">
<div class="c-video-container">
<video id="videoPlayer" class="video-js vjs-default-skin video-cover" width="100%" height="100%" controls preload="none" poster="<?php echo esc_url($video_thumbnail_url); ?>"
data-setup='{}'>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4'/>
</video>
</div>
</div>
</div>
<div class="cb-article-media__container padding-top-sm padding-bottom-sm">
<div class="cb-article-media__video-block">
<div class="c-video-container">
<video id="videoPlayer" class="video-js vjs-default-skin video-cover" width="100%" height="100%" controls preload="none" poster="<?php echo esc_url($video_thumbnail_url); ?>"
data-setup='{}'>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4'/>
</video>
</div>
</div>
</div>
and here is the JS:
var videoContainer = document.querySelector('#videoPlayer');
var videoControl = document.querySelector('.vjs-control');
var timeDivider = document.querySelector('.vjs-time-divider');
var timeDur = document.querySelector('.vjs-duration');
var fullScrControl = document.querySelector('.vjs-fullscreen-control');
$(document.body).on('click', '.vjs-fullscreen-control' , function(){
if (videoContainer && videoContainer.classList.contains('vjs-fullscreen') ) {
fullScrControl.className += " exit-full-screen";
} else {
fullScrControl.classList.remove("exit-full-screen");
}
});
$(document.body).on('click', '.vjs-big-play-button' ,function(){
// if (videoContainer.hasClass('vjs-playing')) {
videoContainer.className += " show-controls";
// }
});
How would I be able to make this JS/Jquery above work per instance of video player on the page (to show and hide the controls per player)? At present it only works for the first video player on the page.
Any help would be really appreciated.
Here is a codepen to the same issue:
https://codepen.io/nolimit966/pen/LYVyVzz
Thank you
Your HTML is incorrect - you have multiple elements with the same ID - videoPlayer. Each ID must be unique in its home subtree (document).
To fix this issue give each player a unique id, e.g.
<video id="videoPlayer1" ...
<video id="videoPlayer2" ...
In JS you just need make sure that you are controlling the correct player. To do this you probably just need to get the elements based on the control that was clicked rather than hard coding them.
You don't show the actual page markup - so this is a guess - but you want something like the following using "closest".
$(document.body).on('click', '.vjs-fullscreen-control' , function(){
// note this is a guess, it could be $(this).parent, is the player you want.
var player = $(this).closest('.video-js')
if(player.classList.contains('vjs-fullscreen')) {
player.closest('.vjs-fullscreen-control').className += " exit-full-screen";
} else {
player.closest('.vjs-fullscreen-control').classList.remove("exit-full-screen");
}
});
In any case the principal remains the same - remove your hardcoded selectors and target the elements relative to the target of the click handler. If this doesn't work then please provide the full mark-up of a video player showing all the elements such as '.vjs-control' and '.vjs-fullscreen-control'
I have 8 videos on a page. on each video element i have add some things like sound control and description.
Specifically, the sound control mutes and umutes the video on click and also changes its icon accordingly. Hoever, when the video goes full screen, the browser uses its own controls for sound. So, for example if a user watches a video on mute, then goes full screen, and then turns on sound, and then exits full screen, the sound is still on but the sound control suggests it is not.
So i'd like to run a function every time any video on the page exits full screen, to update the sound icon.
Here's my html for the video element. I have 8 identical video elements on the page:
<div class="section-element video-mockup" onmouseenter="hoverIn($(this))" onmouseleave="hoverOut($(this))">
<video loop muted playsinline preload="metadata" class="video-onhover" controlsList="nodownload" onclick="clickPlay($(this))" ondblclick="toggleFullscreen(this)">
<source src="/wp-content/uploads/wysiwyg/webm/Video.webm" type="video/webm">
<source src="/wp-content/uploads/wysiwyg/webm/Video.mp4" type="video/mp4">
</video>
<div class="section-inner video-overlay">
<hr class="whiteLine">
<div class="videoControls">
<div class="overlay-columns description">
<p class="overlay-text"></p>
</div>
<div class="overlay-columns buttons">
<button class="videoButtons sound-button" title="Sound" onclick="toggleSound(this);"><ion-icon name="volume-off"></ion-icon></button>
<button class="videoButtons reset-button" title="Restart" onclick="expandVideo(this);"><ion-icon name="expand"></ion-icon></button>
</div>
</div>
</div>
</div>
So I am trying to update the <button class="videoButtons sound-button" title="Sound" onclick="toggleSound(this);"> on any video that exits fullscreen.
Here's my code for that:
$('video.video-onhover').on('fullscreenchange', function($this) {
var thisVideo = $this.target;
console.log(thisVideo);
var soundButton = thisVideo.parentElement.querySelector('button.sound-button');
if (thisVideo.muted) {
soundButton.innerHTML = '<ion-icon name="volume-off"></ion-icon>';
} else {
soundButton.innerHTML = '<ion-icon name="volume-high"></ion-icon>';
}
});
I added the console.log to see if the function is being called, but it doesn't seem to run. i am guessing there is something wrong with the fullscreenchange event but i can't find any other way. Any ideas?
https://jsfiddle.net/kaldenfi/rpmk93wm/3/
<div ng-app="myApp" ng-controller="testCtrl">
<section ng-if="url">
<video id="player1" playsinline autoplay loop muted volume="0.0">
<source ng-src="{{url | trusturl}}" type="video/mp4"> Your browser does not support the video tag.
</video>
</section>
</div>
After updated to chrome 64, this is no longer muting my video. If i take the video outside of the ng-if and hardcode the url it works as it should
Any solutions?
Okay found a temporary solution, if I move the ng-if to the source tag, it mutes it correctly.
Chrome 64 must be doing something when the page first loads it's looking for any video tags, so if your video tag isn't there on load it won't run the muted tag
I had the same issue in an Ember application I am working on.
The 2 solutions I had:
move the <video> tag(s) to the index.html, like you similarly did
create a function that can be called on an init or window.onload hook
mutePlayer1VideoHack() {
const player1Video = document.getElementById('player1');
player1Video.setAttribute('muted', true);
}
I prepended the function name in #2 with Hack in the case this is a true Chrome 64 bug that will be fixed. I am going with solution #1 for my case