I am trying to build a carousel with videos and the carousel part is somewhat working, but the video player is not.
This is how the HTML looks like
<div class='col-sm videoCarouselMain redSectionUnderline'>
#foreach ($videos as $video)
<div class="videoCarouselMainItem">
<video id="playerYt" controls="controls" poster="{{mediaObj($video)}}">
<source src="{{$video->youtube}}" type="video/youtube">
</video>
</div>
#endforeach
</div>
And this is the initialisation script
$(document).ready(function() {
$('#playerYt').mediaelementplayer({
alwaysShowControls: false,
videoVolume: 'horizontal',
features: ['playpause','progress','volume','fullscreen']
});
});
What happens is when I click on the first slide to play the video it somewhat plays, although looks messy (which is probably fixable with CSS after some tinkering). My bigger question and problem is once second slide and video is chosen, that video won't play and I assume it has something to do with the id being the same, however I am not sure how to fix that. Any help is much appreciated! If any other code is needed to better understand my issue let me know! :)
Related
Background
Creating a portfolio page showcasing images and videos using Gatsby/React. I have stored the media sources in an array and then I traverse over this array to create a grid.
Problem
The video thumbnails in the grid are getting duplicated. The second video is getting the thumbnail of first video:
Although, the dev tools show different sources for these videos.
Happens again on another page:
Video objects are created as following:
<VideoContainer key={`vid-${section}-${itemCounter}`}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
<VideoContainer /> is a styled div.
It happens on multiple videos. What I've tried so far:
Ensure that the sources of these videos are different. When the video is played (by clicking on the play button over the thumbnail), correct video is played.
Add a key attribute on the video tag as well. But, it doesn't solves the problem.
Note: It is very indeterministic behavior because it doesn't happens always. Sometime, it gets corrected on page refresh and sometimes it doesn't.
Edit
You can see that I am not setting thumbnail from another source. It just displays the video frame. I append "#t=10" (any number) at the end of video URL and add preload="metadata" on the video tag to load the frame at that time.
Try adding a more unique key:
<VideoContainer key={currImg}>
<video className="proj-video" preload="metadata">
<source src={currImg.src} type={`videomp4`} />
</video>
<div className="btn-container">
<FontAwesomeIcon color="white" size="4x" icon="play" />
</div>
</VideoContainer>
vid-${section}-${itemCounter}, for its own nature, is a good identifier but not a good key, but it seems that may not be as unique as currImg is.
I am working on a fiddle in which I want to resize/drag/drop an image over a youtube video.
In the above fiddle, I cannot resize the image at fast pace over the youtube video. I am not sure what are the reasons behind it. I can resize/drop/drag but not at a very fast pace.
The HTML/JS I have used in order to achieve the above fiddle is:
HTML:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
<div id="wrapper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
JS(JQuery):
$(function() {
$('#wrapper').draggable();
$('#image').resizable();
});
Problem Statement:
I am wondering what changes I should make in the HTML code so that I am able to resize the Google Image properly. At this moment, it seems like I am not able to resize the image at fast pace.
youtube video complicates it, so create an overlay over video and make it visible when resize event starts, and hide when resize stops.
$('#image').resizable({
start: function( event, ui ) {
$('#overlay').show();
},
stop: function( event, ui ) {
$('#overlay').hide();
}
}
);
});
working code: https://jsfiddle.net/obn4yph0/
When I embed a youtube video in my slider, it breaks the "Auto Advance" to the next slide. Every other slide advances fine. It also won't auto play (unless I add to the data-videoattributes &autoplay=1) so autoplay must also be broken.
Here is the html (The youtube does play fine when youclick on it)
<li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="9400" data-thumb="../../assets/frontend/pages/img/revolutionslider/thumbs/thumb2.jpg">
<img src="../../assets/slider_backs/dark_building.jpg" alt="">
<div class="caption lfl slide_item_left tp-videolayer"
data-x="30"
data-y="50"
data-speed="400"
data-start="10"
data-autoplay="true"
data-volume="mute"
data-autoplayonlyfirsttime="true"
data-nextslideatend="true"
data-videoattributes="fs=0&start=0&showinfo=0&frameborder=0&controls=1&rel=0&end=60"
data-ytid="oHg5SJYRHA0"
data-videowidth="533"
data-videoheight="300"
data-easing="easeOutBack">
I figured it out.
This works:
data-videoattributes="fs=0&start=0&showinfo=0&frameborder=0&controls=1&rel=0&end=60&version=3&enablejsapi=1"
Have to add: &enablejsapi=1
To get it to work.
I'm trying to make custom HTML5 audio event buttons. I know I can use the controls but I want to make my own my code is below:
<audio autoplay="true" loop src="vid/birth.mp3"></audio>
<button onclick="document.getElementsByTagName('audio').play()">Play</button>
<button onclick="document.getElementByTagName('audio').pause()">Pause</button>
When I load the page the audio starts but the controls won't work, I click them and nothing happens. What am I doing incorrectly?
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
Update:
I was able to figure out that had some z-index atribute issues that was pushing the buttons to the background and making them unusable. After some CSS trickery I was able to get it to work using the code below:
<audio id="audio" autoplay="true" loop="1" src="vid/birth.mp3"></audio>
<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
I have a special requirement with html5 <video>, I hope, you guys can help me out.
Is it possible to add a <div>,<p> or something above the html5 <video> object?
Plus Trigger the PlayState of the Video and hide it, and show it after the video is stopped?
This is the Poster:
eg:
<video width="280" height="158" poster="img/thumb.png" controls>
<source src="TestVideo1.mp4" type="video/mp4">
Get a new Browser my friend
<h1>Title</h1>
<p>Some Description</p>
</video>
And is should look like this
Is there any possible way to do this?
Thank You
Note:
I have read this post Overlaying a DIV On Top Of HTML 5 Video but it didn't helped.
Images:
Poster
http://i.stack.imgur.com/vA1zn.png
It should be like this:
http://i.stack.imgur.com/qsZaI.png
You are going to have to use a combination of the canvas tag and javascript to get what you want.
Try taking a look at these two articles for a start:
video + canvas = magic
Using CSS3 and Jquery to create a custom HTML5 Player