I have embedded a youtube video on my site, and want to remove all play/pause functionality form it. I have already made it so that the controls are not visible; however, the video still pauses when the user clicks on the video.
I'm using a youtube "player" and div to embed it:
<div id="player" style="position: absolute; width:100%; height: 100%;" frameborder="0"> </div>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: 'Ir8-0xOptFA',
playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo' : 0, 'wmode' : 'transparent', 'modestbranding': 1},
events: {
'onReady': onPlayerReady,
},
version: 3
});
}
</script>
The idea is that this video will serve as the 'background' for the main page of the site. Any insights would be much appreciated!
Have you thought about overlaying a transparent DIV?
Your question may have already been answered here?
Look into THIS link
And THIS link.
You may have to load the preview image in place of the button. Not sure if that will help
Related
I'm using Splide as a full-width slider on a page with images taken from a loop of my database:
<div class="splide b-bottom-accent is-hidden-mobile">
<div class="splide__track">
<ul class="splide__list">
#foreach($slider_images as $image)
<div class="splide__slide"><img src="{{ asset('storage/'.$image->path) }}"></div>
#endforeach
</ul>
</div>
</div>
my javascript to trigger the slider:
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
} ).mount();
The cover option makes it so the images become background of the div and can be cover, the perPage, gap and padding options are there to make the fade work.
The documentation doesn't say how to activate autoplay, I think it implies is automatically activated, instead, it says how to add a progressbar only :
You can add a progress bar or play/pause buttons for autoplay by writing a few extra lines of HTML.
Am I missing something? Everything works, the slider shows, the images show, the fade happens when clicking the arrows, I have no errors in my console. Any idea?
You just need to add autoplay: true, and an interval is also configurable (ms). I found setting the type to fade it was best to have rewind set to true too.
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
autoplay: true,
interval: 4000
} ).mount();
I have multiple embed videos from different sites (Youtube,Vimeo, Dailymotion etc..) on a single page. I would like to give the user a central control panel similar to any desktop media player with pause, play, next video, prev video and volume control.
How can i achieve this ? Is it even possible ? I know Youtube has an api but what about other websites ? Is there a common API for all of them ?
Thanks
http://jsfiddle.net/sumanP/rzeb23aq/1/
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player1st;
var player2nd;
function onYouTubePlayerAPIReady() {
player1st = new YT.Player('frame1st', {events: {'onStateChange': onPlayerStateChange}});
player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}});
}
//function onYouTubePlayerAPIReady() { player2nd = new YT.Player('frame2nd', {events: {'onStateChange': onPlayerStateChange}}); }
function onPlayerStateChange(event) {
alert(event.target.getPlayerState());
}
</script>
<iframe id="frame1st" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/1g30Xyh6Wqc?rel=0&enablejsapi=1"></iframe><br>
play1st<br>
pause1st<br>
stop1st
<iframe id="frame2nd" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/T39hYJAwR40?rel=0&enablejsapi=1"></iframe><br>
play2nd<br>
pause2nd<br>
stop2nd
I have a HTML5 video element on my webpage and I want to create a custom timeline control for the video. However, I am having problems when I seek right to the end of the video. When I try to seek backwards, the video does not change (the ticker still moves though). Calling the "play" method does nothing either. The only thing that does seem to work is the "currentTime" and "ended" properties, which are still updated correctly.
Here is the HTML layout of my video and ticker (the "blocks" table has a z-index of 1000 and sits below the ticker, so it does not interfere with it):
<div id="player">
<video width="500">
<source src="Tutorial 1.mp4" type="video/mp4">
</video>
<ul>
<li id="play_pause" title=""><img src="control.png"></img></li>
<li id="volume" title=""><img src="speaker_volume.png"></img></li>
<li id="split" title=""><img src="scissors_plus.png"></img></li>
<li id="merge" title=""><img src="film_minus.png"></img></li>
</ul>
<div id="timecode" class="modtime"><img src="mark_time.png"></img><div></div></div>
</div>
...
<div id="timeline">
<table id="blocks" width="100%" cellspacing="0" cellpadding="0" border="0" class="CRZ">
<tbody>
<tr>
<td style="width: 800px;"></td>
</tr>
</tbody>
</table>
<div id="ticker"></div>
</div>
And here's the CSS for the "ticker" and "timeline" elements:
#timeline {
float: left;
width: 850px;
height: 30px;
background: lightblue;
margin-left: 25px;
border: 1px solid black;
border-radius: 2px;
}
#ticker {
height: inherit;
width: 1px;
background: red;
z-index: 3000;
position: relative;
left: 0px;
cursor: col-resize;
opacity: 1;
}
I made the "ticker" element draggable using Jquery UI, creating an event handler to update the videos "currentTime" property during the drag. The "timecode" element displays the "currentTime" element in MM:SS.SS. This is still functional after seeking to the end.
$("#ticker").draggable({ containment: "parent", axis: "x", cursor: "col-resize", grid: [ 1, 1 ], drag: function( event, ui ) {
$("#stage2 video").prop("currentTime", ((ui.position.left - 1) * $("#stage2 video").prop("duration")) / ($("#timeline").width() - 2));
$("#timecode div").text(sec2smpte($("#stage2 video").prop("currentTime")));
}});
I also scripted the ticker to move when the video is playing (controlled by simply calling the "play" method when a button is clicked). The behaviour is apparent whether the video has been played or not:
$("#stage2 video").on("timeupdate", function() {
$("#ticker").css("left", ($("#timeline").width() * $("#stage2 video").prop("currentTime")) / $("#stage2 video").prop("duration") + "px");
$("#timecode div").text(sec2smpte($("#stage2 video").prop("currentTime")));
});
$("#play_pause").click(function() {
if ($("#play_pause img").attr("src") == "control.png")
{
$("#play_pause img").attr("src", "control_pause.png");
$("#stage2 video").trigger("play");
}
else
{
$("#play_pause img").attr("src", "control.png");
$("#stage2 video").trigger("pause");
}
});
UPDATE: I ran my source video through FFmpeg and that seemed to fix the issue. It seems to be a seeking problem with some .mp4 files. I also noticed that it would exhibit similar behaviour if it tried to seek backwards.
I am developing a web application where I have a youtube video player embedded in one of my web pages. I am trying to present extra information on top of the playing video (on full screen). By extra information I mean a message with some text or maybe an image.
The code for the embedded player is similar to this:
<div id="player" align="center"></div>
<noscript>This feature requires Javascript, please turn it on</noscript>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
var uid;
var firstStatus = 1;
var firstTimeStamp = 0;
// Current state of the player
var state = -1;
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var show = getVarsFromUrl()['showId'];
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: show,//'a8u_a9q978M',//'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
I intend to present the extra information on top of a playing video.
I hope I was clear enough. Thanks!
Extra code:
The style (CSS):
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
background-color: #222222;
color: #C0C0C0;
}
img {
position:relative;
left:500px;
top:500px;
z-index:5;
}
iframe {
position:absolute;
left:500px;
top:500px;
z-index:-1;
}
</style>
And the image:
<img src="smiley.png" alt="Smiley face" height="42" width="42">
Add ?wmode=opaque to the end of the url to enable the use of z-index. Then use z-index in your CSS to layer your styles accordingly.
I've tried various things but can't get a YouTube video in a hidden DIV to stop playing in the background before the DIV toggle is even clicked. visibility:hidden didn't seem to solve the issue. Here's the code I'm using. Hope someone can help! I can turn off autoplay to solve it, but then it means users have to click an extra button (the YouTube 'play' button) which isn't ideal.
** IN THE OF THE WEB PAGE:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".productDescription").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});
});
</script>
** IN THE BODY:
<div class="productDescription">
<iframe width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&wmode=transparent&autoplay=0" frameborder="0" allowfullscreen></iframe>
<div class="closebutton">Close Video
</div>
</div>
** AND IN THE STYLESHEET:
.productDescription {
display: block;
position:absolute;
left:0px;
top:-2px;
z-index:5;
background-color: #000;
margin: 0px;
float: left;
padding: 0px;
width: 715px;
min-height: 600px;
height: 600px;
}
.show_hide {
display:none;
}
.closebutton {
display: block;
width:120px;
height: 22px;
position:absolute;
left:20px;
top:50px;
background-color: #000;
padding-top: 3px;
float: left;
z-index: 9999;
}
Thanks very much in advance!
The autoplay feature will start to play the video once it is loaded, whether the div is visible or hidden.
However, if you remove the autoplay setting, you can then use a YouTube API to control the video so that the video will start playing when a person clicks to show the div. One option is the iframe API (which I would recommend since you are already using iframe to embed the video, and this allows YouTube to serve up an HTML5 video rather than a flash video if the viewer is on a mobile device) and another option is the JavaScript API.
Because you asked for more details, here is a quick explanation of how to use the YouTube iFrame API to meet your needs. I recommend reading the documentation so you can understand what is going on and adapt it as needed.
First, in your HTML create your iframe video the same way you did above, but add two things: an ID for the iframe and an origin parameter in the iframe src. (The origin parameter helps keep you YouTube player safe from javascript hacking.) So it would look like this:
<iframe id="player" width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&wmode=transparent&autoplay=0&origin=http://example.com/" frameborder="0" allowfullscreen></iframe>
Replace the example.com url with the website this page will be on.
Somewhere after the iframe, but before the </body> tag, add this code to load the api and initialize the player:
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player');
}
</script>
Then, in your javascript, just before the line that reads $('.productDescription').slideToggle(), add this code:
if ($('.productDescription').is(':visible')) {
player.pauseVideo();
}
else {
player.playVideo();
}
This code will test to see whether the .productDescription div is visible. If it is hidden, it will start the video and display the div. If it is not visible, it will pause the video and hide the div.
That should do it.
I have same issue, but I could fix with this.Refer to YouTubeAPI,we can't implement directly.So I edit this way.
Step1: Creat loadYTScript() function and put youtubeAPI code,
Step2: is call function onYouTubeIframeAPIReady()
Then at onclick call the load function.
Here is your js code:
function loadYTScript(){
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
jQuery(document).ready(function() {
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
loadYTScript();
});
});
At html don't forget to add
<div class="productDescription">
<div id="player"></div>
</div>
Hope it work well.