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.
Related
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! :)
I'm trying to set the start position in a fullscreen MaterializeCSS carousel. I want to use it as a gallery image viewer inside a fullscreen modal.
Once gallery image is clicked, the modal opens and the image slider should start at the clicked image. Inside the documentation of MaterializeCSS I couldn't find any important information for that.
Currently the carousel slides to the right image. I only want to delete the slide effect on start and activate it after viewing the first image.
Two of many images to open:
<div class="gallery-item-left col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-1" data-position="1" src="...path-to-image-1..." />
</div>
<div class="gallery-item-right col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-2" data-position="2" src="...path-to-image-2..." />
</div>
...
My jQuery code
jQuery(document).ready(function($) {
$('body').on('click', '.gallery-item', function() {
var position = $(this).data('position');
$('#img-viewer-modal').modal('open');
$('#img-viewer-carousel').carousel({fullWidth: true, duration: 400});
$('#img-viewer-carousel').carousel('set', [position - 1]);
});
#img-viewer-carousel is simply the carousel id inside my modal.
I'm very thankful for every tip.
The only workaround I've found is to dynamicly change the content items of the carousel.
See example under https://www.codeply.com/go/EiubFqcKcg
I've created one app in HTML5 and javascript for iPad.
I've put links in page, by clicking that will show/hide different youtube videos.
Here is code
In ipad if i hide one youtube video and show another at that time previous video keeps playing in background till new video loads.
I want to stop previous video playing before another video gets loaded.
(I am using latest iOs, that plays youtube video in quicktime player.)
Here
DEMO
var vids = {
vid1:"http://www.youtube.com/embed/87O_YA4rLyk",
vid2:"http://www.youtube.com/embed/nQ2TsPhsWTA"
}
$(function(e) {
$(".video-section ul li").click(function(e) {
$(this).hide();
$(this).siblings().show();
$("#vid").attr("src",vids[this.id]);
});
$("#vid1").click();
});
<div class="videoContain-big">
<p>
<iframe id="vid" width="560" height="315" src="about:blank" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<div class="video-section">
<ul>
<li id="vid1">Click here to Change Video 1</li>
<li id="vid2">Click here to Change Video 2</li>
</ul>
</div>
QuickTime exposes a number of methods to JavaScript. Some take the form of commands that operate on movies, such as Play(),Stop(),Rewind(), and so on. The rest operate on properties of QuickTime as a whole, the QuickTime plug-in, movies, or tracks. Most of these properties can be read or written using complementary Get and Set methods. Other properties, such as the QuickTime version, are read-only.
You can find a lot of information here
How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?
Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.
Here's what I got so far, which is not working...
IN HEAD OF DOM BETWEEN SCRIPT TAGS
document.getElementById("pauseX").onclick = function () {
document.getElementById('player2').pause();
};
TRIGGER TO REVEAL MODAL
Click here to reveal modal.
VIDEO + MODAL CONTAINER
<div id="vid-1" class="reveal-modal">
<div class="center">
<video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
<source type="video/mp4" src="../media/vid-1-480x320.mp4" />
<source type="video/webm" src="../media/vid-1-640x480.webm" />
<object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/vid-1-480x320.mp4" />
<img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1"
title="No video playback. Update browser, enable Javascript, or install Flash." />
</object>
</video>
</div>
<a id="pauseX" class="close-reveal-modal">×</a>
</div>
Already tried many other solutions, including...
Javascript to stop HTML5 video playback on modal window close
...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?
Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)
if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error
Try to move these instructions on the bottom or on DOM ready event
Got it solved with this script...
<script>
$('.close-reveal-modal').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks #Fabrizio for suggesting I examine my ID attributes to begin with...)
I had tried the iframe for embedding youtube video in sencha inside the html tag.
....
html:'<iframe>Youtube URL</iframe>'
....
I added the above code inside the second icon of the tab bar. The second icon is a scroll view.i.e i set it to scroll:'vertical'
My Problem is when i add youtube video.It comes like this...
Look.Only Part of the video is shown.
when i switch to other tab panel,the video appears as below.
Any Help!!!
I've done this using HTML inside a panel. of course it doesn't play embedded in the sencha app. It jumps to the youTube player.
html: '<div style="margin-left:12px; margin-top:20px"><h1>Syndicate Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/ewwtznVkSxA" frameborder="0"></iframe></p><h1>Prometheus Trailer</h1><p><iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0"></iframe></p></div>'
This leaves the links in the video frame which didn't suit my app so I modified to use this instead:
html: '<div style="margin-left:12px; margin-top:20px"><h1>Eddies Cinema Slot </h1><p><embed id=\"yt\" src=\"http://www.youtube.com/watch?v=5a9-ORWn0fY\" type=\"application/x-shockwave-flash\" width=\"290\" height=\"260\"></embed></p></div>'