How can you fade out /or place a black semi-transparent cover over the entire page when an embedded youtube video is playing and have it go back to normal when the video is over or paused?
javascript?
jquery?
This is as far as I got, I don't know enough coding (just html/css) to use it though:
https://developers.google.com/youtube/js_api_reference#Adding_event_listener
I figured out how to use the API to call the video and have some event listener code I found in the API to call functions on state changes (ex play and end video), though I'm not sure why the listener part isn't working.. I don't have any experience with API's or javascript at this level..
$(document).ready(function(){
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/v/TEHWDA_6e3M?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer",
"960",
"540",
"8",
null,
null,
params,
atts
);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(newState) {
alert("Player's new state: " + newState);
}
});
Place a div with position:fixed and background-color: rgba(0, 0, 0, 0.75) that covers the entire page and then place the video on top of it by listening for the onStateChanged event from the player. You will have to use the javascript player api for this to work.
Related
Using iOS 9.3, link conditioning set to 3g speed, loading a video in the youtube iframe api in safari.
I would expect the iframe api to realize that it has been buffering a bunch and try to get a lower quality stream to keep the video playback smooth, like it does in the native youtube app.
Am I missing something obvious? I basically copied and pasted out of the youtube ios helper wrapper but it still tries to play in a quality that is too high for the connection speed.
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; width:100%; height:100%; background-color:#000000; }
html { width:100%; height:100%; background-color:#000000; }
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
</head>
<body>
<div class="embed-container">
<div id="player"></div>
</div>
<script src="https://www.youtube.com/iframe_api" onerror="window.location.href='ytplayer://onYouTubeIframeAPIFailedToLoad'"></script>
<script>
var player;
var error = false;
YT.ready(function() {
player = new YT.Player('player', {
"events" : {
"onPlaybackQualityChange" : "onPlaybackQualityChange",
"onReady" : "onReady",
"onError" : "onPlayerError",
"onStateChange" : "onStateChange"
},
"width" : "100%",
"height" : "100%",
"videoId" : 'NP7nK2zPirc',
"playerVars" : {
"showinfo" : 0,
"modestbranding" : 1,
"autohide" : 1,
"playsinline" : 1,
"controls" : 0
}
});
player.setSize(window.innerWidth, window.innerHeight);
window.location.href = 'ytplayer://onYouTubeIframeAPIReady';
// this will transmit playTime frequently while playng
function getCurrentTime() {
var state = player.getPlayerState();
if (state == YT.PlayerState.PLAYING) {
time = player.getCurrentTime()
// window.location.href = 'ytplayer://onPlayTime?data=' + time;
}
}
window.setInterval(getCurrentTime, 500);
});
function onReady(event) {
// window.location.href = 'ytplayer://onReady?data=' + event.data;
}
function onStateChange(event) {
if (!error) {
// window.location.href = 'ytplayer://onStateChange?data=' + event.data;
}
else {
error = false;
}
}
function onPlaybackQualityChange(event) {
// window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
}
function onPlayerError(event) {
if (event.data == 100) {
error = true;
}
// window.location.href = 'ytplayer://onError?data=' + event.data;
}
window.onresize = function() {
player.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html>
Based from this documentation, if the playback quality changes, the onPlaybackQualityChange event will fire, and your code should respond to the event rather than the fact that it called the setPlaybackQuality function.
onPlaybackQualityChange event fires whenever the video playback quality changes. For example, if you call the setPlaybackQuality(suggestedQuality) function, this event will fire if the playback quality actually changes. Your application should respond to the event and should not assume that the quality will automatically change when the setPlaybackQuality(suggestedQuality) function is called. Similarly, your code should not assume that playback quality will only change as a result of an explicit call to setPlaybackQuality or any other function that allows you to set a suggested playback quality.
Then I recommend calling the getAvailableQualityLevels() function to determine which quality levels are available for a video. For example, if your page displays a 1280px by 720px video player, a hd720 quality video will actually look better than an hd1080 quality video.
Check these related SO threads:
YouTube iFrame API "setPlaybackQuality" or "suggestedQuality" not working
If you use event 3 (buffering) instead of event 5 (playing) there's no
stutter for the user. Quality is changed as soon as it starts loading.
Only weird thing is you need to set it in onPlayerReady as well or it
doesn't work.
function onPlayerReady(event) {
event.target.setPlaybackQuality('hd720');
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.setPlaybackQuality('hd720');
}
}
Set jw player youtube video playback quality
Hope this helps!
Hi I would like to start playing a sound on a scecific position. The api said that I can use .pos but it doesn't start where I would like it to start
<p>This sound last 13 sec.</p>
<h1>Audio</h1>
<h3>2:00</h3>
<h3>3:00</h3>
<h3>4:00</h3>
<h3>10:00</h3>
My javascript.
var son = [false, "0000"]
sound = new Howl({
urls: ['http://goldfirestudios.com/proj/howlerjs/sound.mp3'],
autoplay: false
});
function playSequence(events,valeur){
//if there is no sound play the track at a certain position
var playSound = function(valeur){
if(son[0] == true){
sound.stop();
son[0] = false;
}else{
son[0] = true;
sound.pos = parseInt(valeur[0]); // position at 2 sec
sound.play();
}
}
playSound(valeur);
}
//play the sound on click
$("a.val2").on('click', function(events){
valeur = $(this).text();
playSequence(events, valeur);
});
pos is a method, not a property. For best compatibility, you would want to play it like follows (fixed in the 2.0 beta branch):
sound.play(function(id){
sound.pos(valeur[0], id);
});
Here's how you would do it in 2.0 (check 2.0 branch at https://github.com/goldfire/howler.js):
var id = sound.play();
sound.seek(valeur[0], id);
If you are only playing one sound then there is no need to set the id, but it is best practice to change the position after playing when using 1.1.x.
I was having issues playing a sound at a specific time as well, it worked on the first play of a sound, but if I tried to go back and play that sound again, using seek immediately wouldn't work.
I just figured out a way to consistently make it work using howler v2:
function playSoundAtPosition(sound, pos) {
sound.once("play", () => {
sound.seek(pos);
});
sound.play();
}
This makes use of the callback method once which fires the callback to the play event and then immediately removes itself. I believe this helps because it waits until it actually knows the sound is playing before seeking to the desired time.
I know this is an old question but hopefully it's useful to someone if they come across this!
You can use Sprites!
var sound = new Howl({
src: ['sounds.webm', 'sounds.mp3'],
sprite: {
blast: [0, 3000],
laser: [4000, 1000],
winner: [6000, 5000]
}
});
// Shoot the laser!
sound.play('laser');
:)
I found it at this link How to Create and use Sprites
I want to change the playback speed of video in HTML5 mode of jwplayer. I am not interested in flash browser, we will be restricting this feature only for HTML5 browsers
Issue:
I tried changing the playbackrate for HTML5 in jwplayer but playbackrate is coming undefined
i am attaching my code below
jwplayer('my-video').setup({
sources: [
{file:'./test.mp4' , type: "mp4" },
],
width:'640px',
height:'360px',
image : './test.jpg'
});
$("#speed_10").click(function() {
myVid=$( "#my-video" ).find('.jwvideo').find('video');
alert(myVid.length);
alert($( "#my-video" ).find('.jwvideo').find('video').attr('src'))
alert(myVid.playbackRate)
alert($( "#my-video" ).find('.jwvideo').find('video').length)
$( "#my-video" ).find('.jwvideo').find('video').PlaybackRate=0.5;
});
1st alert coming as 1
2nd alert coming undefined
3rd alert is showing "source"
4th alert is 1
I am able to catch the div but not able to change the playback rate in jquery !!!
http://www.longtailvideo.com/support/forums/jw-player/feature-suggestions/32556/playbackrate-support/
following above link i also tried with java script and it worked using code below
(document.getElementsByTagName('video')[0].playbackRate=0.2.
but if i use above code how do i use this for multiple video since there is no ID involved in above code [no unique id is passed for above javascript]
Below is the div structure for the jwplayer
I found the answer for this, main issue which i faced for multiple video was how to make each video unique.i just had to get div by ID first and after get 'Video' tag than change playbackrate
adding the code below
var video = document.getElementById('exampleId')
var video_speed = video.getElementsByTagName('video')[0]
alert(video_speed.playbackRate)
video_speed.playbackRate=0.2;
alert(video_speed.playbackRate)
I even tried with multiple video, it worked fine
Found this script manually manipulating the DOM for custom speeds:
<script type="text/javascript">
jwplayer("video").setup({
image: 'https://<your_CDN_ID>.cloudfront.net/static/splash/<splash.png>',
width: 960,
height: 600,
flashplayer: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.flash.swf",
html5player: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.html5.js",
primary: 'html5',
sources: [
{ file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.mp4' },
{ file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.webm' }
]
});
var tag;
jwplayer().onReady(function(){
if (jwplayer().getRenderingMode() == "flash") {
return;
}
tag = document.querySelector('video');
tag.defaultPlaybackRate = 1.0;
tag.playbackRate = 1.0;
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/25.png", "", function(){
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 0.25;
},"025");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/05.png", "", function(){
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 0.5;
},"05");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/1.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 1.0;
},"1");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/125.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 1.25;
},"125");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/15.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 1.5;
},"15");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/2.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 2.0;
},"2");
});
</script>
Instead of toggle like the excellent blogpost from Ethan there are speed buttons.
Just setting a custom speed:
document.querySelector('video').playbackRate=0.80;
https://developer.jwplayer.com/jw-player/demos/advanced/set-playback-rate/
only add line playbackRateControls in .setup()
jwplayer('user-player').setup({
playlist: 'https://cdn.jwplayer.com/v2/media/gaCRFWjn',
// Set the available playback rates of your choice
playbackRateControls: [0.75, 1, 1.25, 1.5]
});
Just add ids to your videos and use document.getElementsById (id) instead of document.getElementsByTagName.
document.getElementsById('yourid').playbackRate=0.2
I wrote a blog post about a how to do this in the JW Player, by the way. It might be helpful! - http://www.longtailvideo.com/blog/33860/slow-motion-with-jw-player
So I have this code which looks something like this and plays YouTube videos:
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "XjMQmXAJ3y4"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always"};
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=player1",
"videoDiv", 800, 600, "8", null, null, params, atts);
Is it possible to make the video fill out the screen (100% width and 100% height)?
ALSO, I'm wondering if it's possible to make the video autoplay?
--
EDIT: the autoplay problem has been fixed but the full screen width and height issue remains, I have tried to implement the following code to no avail:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
</script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
var locationToRedirect = "http://URL.com";
function EventListener(ev)
{
if(!ev)
{
window.location.href = locationToRedirect;
}
else if(ev == 5)
{
ytpl = document.getElementById("ytPlayer");
ytpl.playVideo();
}
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onStateChange", "EventListener");
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "XjMQmXAJ3y4"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always"};
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=player1&autoplay=1",
"videoDiv", screen.height, screen.width, "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
See this question for obtaining how big the screen is. You could then use these values in place of where you have 800, 600 which is where I believe you have height and width of the player.
Then just add &autoplay=1 after the video ID. Source.
EDIT: I found another question that covers screen resolutions. How to get screen resolution of visitor in javascript and/or php?
I have updated my SWFObject to 2.2 from 1.5 and now need to replicate some old functionality that used to work in 1.5, viz an event jumping to a certain point in the video.
Here's the contents of my script tag:
var flashvars = {
file: '79834.flv',
autostart: 'true',
displayclick: 'mute',
repeat: 'single',
start: 0
};
var params = {
allowfullscreen: "true",
allownetworking: "all",
allowscriptaccess: "always"
};
swfobject.embedSWF("player.swf","main","500","400","9.0.0", "false", flashvars, params);
var player;
function playerReady(obj) {
player = document.getElementById(obj.id);
alert(player);
setTimeout("seek()", 1000);
}
function seek() {
player.sendEvent("SEEK", 100);
}
The top half is what I've replaced the old V1.5 code with.
The bottom half (from "var player") is what no longer works. playerReady is still happening, but apparently obj.id is now "null". Is there a new correct way to find the player element? Or a different way to implement a seek event?
You missed the id attribute:
var attributes = {
id: "playerID"
}
// and later
swfobject.embedSWF("player.swf","main","500","400","9.0.0", "false", flashvars, params, attributes);