Tagged: LayerSlider, mp4, video
-
AuthorPosts
-
March 4, 2014 at 11:58 pm #232449
I’m trying to have one of the following videos play in a slide in the Layer Slider and also in the background of a Color Section but I can’t seem to figure out the code to make this happen.
http://www.got2bmoving.com/files/videos/skyTran_UniversalStudios-002.mp4
http://www.got2bmoving.com/files/videos/City_NightVideo-002.mp4I tried the <video> tag that works on other pages of our site but someone couldn’t get that to work. Maybe there is another solution?
Any details you can provide for the HTML code I should include (and/or other steps) would be great.
Thanks very much.
March 5, 2014 at 2:26 am #232478Hey Jane!
Try with a code like this:
<video id=”ls-video"> <source src=”video.mp4″> <source src=”video.webm”> <source src=”video.ogv”> </video>
Regards,
JosueMarch 5, 2014 at 8:26 am #232580HI Josue, Thanks for your reply. Here’s the scoop:
I have the video displayed on: http://got2bmoving.com/sample-page/
with the following code:
<video id=”video_background” preload=”auto” autoplay=”true” loop=”loop” muted volume=”0″>
<source src=”/files/videos/skyTran_UniversalStudios-002.mp4″ type=”video/mp4″/>
<source src=”/files/videos/skyTran_UniversalStudios_002.webm” type=”video/webm”/>
<source src=”/files/videos/skyTran_UniversalStudios_002.ogv” type=”video/ogg ogv”; codecs=”theora, vorbis”/>
Video not supported.
</video>So I created a Layer #1 for Slide #3 in the LayerSlider on the Home page, selected the “Div/Video” icon and entered the above code in the “Custom HTML content” field.
Since the video is 70 seconds long, I set the “Slide delay” for Slide #3 to 70000. Would you confirm that this is correct for a video – i.e. to set the “Slide delay” to the length of the video?
For slide #4, I entered the code that you sent me, with the link to our video:
<video id=”ls-video”;>
<source src=”http://www.got2bmoving.com/files/videos/skyTran_UniversalStudios-002.mp4″>
<source src=”http://www.got2bmoving.com/files/videos/skyTran_UniversalStudios-002.webm”>
<source src=”http://www.got2bmoving.com/files/videos/skyTran_UniversalStudios-002.ogv”>
</video>In both cases, I see a black box at the top left in the “Preview” of the slider. In neither case is the video appearing in the Home page slider.
Maybe it’s the “Slide delay”, maybe I have the Width, Height, Left or Top set incorrectly?
Any help or guidance you can provide would be great. If you need to login to the backend of our site I can provide a login. (let me know where to send this info)
Thanks in advance for your help.
March 7, 2014 at 8:55 am #233646I’m just checking in to see if you have any advice for me. I’d like to know the code to display an .mp4 video in the LayerSlider.
Thanks.March 7, 2014 at 5:47 pm #233880Hey!
I tested this locally and it worked;
<video id='ls-video'> <source src='http://www.got2bmoving.com/files/videos/skyTran_UniversalStudios-002.mp4'> <source src='http://www.got2bmoving.com/files/videos/skyTran_UniversalStudios-002.webm'> <source src='http://www.got2bmoving.com/files/videos/skyTran_UniversalStudios-002.ogv'> </video>
Make sure you are using the right quotes.
Best regards,
JosueApril 7, 2014 at 12:35 am #247965If I might be permitted a suggestion, I have wasted much of today simply trying to get an mp4 video as a background to one of my LayerSlider slides. I have searched the support posts and any help documentation I could find and I’ve used just about every code going to insert the video as the first layer. I can click directly on the file on the server and it plays just fine. Depending on the code that I use sometimes I can see the full slide video running, that is until I hit Enter Preview and then it’s gone.
This is a very important feature of the theme and it would really great if there was some help documentation stating exactly how to add a video background, including maybe why none of the recognized formats work. .
Appreciate your help, as always.
Cheers! .
April 7, 2014 at 2:53 am #247982Hi!
The code i provided is meant to use a video as a layer, i’m not sure if it possible to use a video as a background in LS.
Best regards,
JosueApril 7, 2014 at 12:58 pm #248146My issue IS with using a video as a layer. I edited the first layer, adding every video code imaginable for the video that is on the server in the library, but NOTHING worked.
I am happy to provide you with an admin user if that helps.
April 8, 2014 at 3:53 am #248591Please do so, provide the links to the self-hosted video too.
April 8, 2014 at 12:07 pm #248737Video location:
http://www.prismcareernetworks.com/prism_wordpress/wp-content/uploads/2014/04/FVBHD0075.mp4
Password sent by email. Username is Josue.
April 8, 2014 at 4:12 pm #248826Which email did you set? i didn’t receive anything.
Best regards,
JosueApril 8, 2014 at 4:17 pm #248830This reply has been marked as private.April 8, 2014 at 4:38 pm #248834Just got a warning from WordFence that you had signed in. Gotta love it.
April 8, 2014 at 4:45 pm #248835Hey!
Seems to be an issue with the video, i tried with another mp4 and it did work, please take a look:
http://www.prismcareernetworks.com/prism_wordpress/video-test/I also downloaded your video and it did reproduce in a player, but not on the browser, so it would be a matter of checking the encoding/conversion.
Regards,
JosueApril 8, 2014 at 4:48 pm #248838I suspected the same thing, but when I opened the server file it played just fine. If you refer back to my original post you’ll see the other issues with having a video layer background. Those are more important than this particular video not working.
April 8, 2014 at 5:58 pm #248885Hi!
You can use a video as a “background” layer in LS, it will work fine if you only have one slide, but the problem is that the video will stop when the slide changes, the only solution i see is to use a Color Section > Easy Slider, which works:
http://www.prismcareernetworks.com/prism_wordpress/video-test/
Please note that this is a LayerSlider limitation, right now you can only set a background image for a slider.
Best regards,
Josue -
AuthorPosts
- You must be logged in to reply to this topic.