I'm using the HTML5 Background Video script (https://github.com/Victa/HTML5-Background-Video), and I'd like to be able to add some volume/play controls. I tried integrating solutions I found for other HTML5 video players, to no avail.
Minimally, I'd like a mute/volume control. Play/pause/stop would be optionally cool.
Here's the script calling the video:
var videobackground = new $.backgroundVideo($('#bgVideo'), {
"align" : "centerXY",
"path" : "video/",
"width": 1280,
"height": 720,
"filename" : "cows",
"types" : ["mp4", "webm"]
});
The site where I'm using the video is a Bootstrap template, and is located here: http://harbourcitydevelopment.com/beef/samples/sample-04/
Thanks for any ideas!
In the file 'jquery.backgroundvideo.min.js', I just added muted="true" and controls="true", and it did the trick. Thanks to Atutouato for the suggestion with .play(), .pause(), which put me on the right track!
Related
I am having difficulty capturing HD video with the Ziggeo Recorder.
I have set up a Recorder, basically, it’s a clone of Ziggeo's hosted solution:
<script>
$(document).ready( function() {
//assigning the event handler for click on the Next button on first screen
$("#step1 button").on("click", function() {
//hide first screen
$("#step1").hide();
//show second screen
$("#step2").show();
//add our embedding to the page
var recorder = new ZiggeoApi.V2.Recorder({
//we find the element with id="recorder" to attach v2 recorder to it
element: document.getElementById("recorder"),
attrs: {
//we make the recorder responsive
responsive: true,
//we set the max time for recording to 120 seconds
timelimit: 2 * 60,
theme: "modern",
video_width: 1920,
video_height: 1080,
video_profile_transcoding: "HDcapture",
hd: true,
//we add name and email to the video as a custom data
"custom-data": {
name: $("#name").val(),
email: $("#email").val()
}
}
});
//we activate the recorder
recorder.activate();
recorder.on("verified", function() {
//once video is uploaded and seen that it can be processed the verified event fires we show the
// button to Submit the form
$("#step2 button").show();
});
});
//When Submit button is clicked
$("#step2 button").on("click", function() {
//hide second screen showing recorder
$("#step2").hide();
//show the "Thank you" screen
$("#step3").show();
});
});
</script>
I’ve tried the following in the attrs array with no avail.
video_width: 1920,
video_height: 1080,
video_profile_transcoding: "HDcapture",
hd: true,
I set up a video transcoding profile (and made it default), but it isn’t catching.
All videos are coming through at:
video_width: 640,
video_heigh: 480,
hd: false,
These Ziggeo support resources don’t seem to answer how to record HD (w/ v2 & JS)...
https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-
https://ziggeo.com/blog/record-video-in-hd/
And I don't see reference to HD anywhere here:
https://ziggeo.com/docs/api
Thanks in advance for any help or guidance. The promise of the Ziggeo product is awesome–I just need to get it to deliver HD!
It is awesome that you included the links and the codes Jon. Looking at them I can see why it is not working for you. My suggestion would be to check out the code from one of your links: https://support.ziggeo.com/hc/en-us/articles/206452028-How-do-I-record-in-HD-
This is the code currently shown there:
<ziggeorecorder
ziggeo-recordingwidth=1280
ziggeo-recordingheight=720
ziggeo-theme="modern"
ziggeo-themecolor="red"
ziggeo-video-profile="_name_of_your_hd_profile">
</ziggeorecorder>
The key parameters for recording HD videos would be setting recordingwidth and recordingheight to the values you wish to use. The default would be 640x480.
The HTML codes require ziggeo- prefix, while JavaScript one does not.
So changing the above example would result in the code that would look like so:
var recorder = new ZiggeoApi.V2.Recorder({
//we find the element with id="recorder" to attach v2 recorder to it
element: document.getElementById("recorder"),
attrs: {
theme: "modern",
recordingwidth: 1920,
recordingheight: 1080,
'video-profile': "_HDcapture"
}
});
I have removed most other parameters to show the most basic parameters you need to set.
Now, in the above code you can also notice that I used underscore before the video profile name resulting in _HDcapture. This is because the tokens (IDs generated by our system) are used without underscore, however if you made the ID, this is then a key (your unique ID) and to make our system aware that it is a key, it will look for the underscore. So if you do not put the underscore in your embedding, then it will just ignore it.
You can see "identifier: _HDcapture" shown to you when you create video profile in the dashboard helping you to know what exactly you should use.
Now looking at the parameters you have used, I believe that you used them from the video data then adding them to your embedding.
This video data is just showing you what you can expect in the JavaScript functions like recorder.get() or what would come in webhook. For actual parameters that you can use you should check out the docs here.
One thing to point out: You can only record 1080 if your camera supports 1080. If you use 720 then your camera has to support 720. Most cameras support 640x480 and is the reason why it is our default. I am saying this because:
You need the camera to be able to record in resolution you wish
You might want to also have alternative for people that do not have HD cameras
For anything JavaScript and HTML related, I would suggest checking out the docs here: https://ziggeo.com/docs/sdks/javascript/. Still do post here, or reach out to the support team of Ziggeo, either over email (support#ziggeo.com) or through forum: https://support.ziggeo.com/hc/en-us/community/topics
PS: I am part of the Ziggeo team, we all like to help, and I hope the above is helpful to you and anyone else looking for the same :)
Hello I'm displaying a youtube video in a div full screen.
It change size on resize window and the most important thing it load on demand and play/pause if it's on the viewport or not.
To control the viewport and lazy loading I'm using viewportchecker
So, ViewportChecker check if the DIV is in the viewport, if YES it start the funcion playPause1, the function will start the video or pause it in case the video is already being played.
$('#Wraptv1').viewportChecker({
callbackFunction: playPause1,
offset: 300,
repeat: true,
});
Everything works very good but sometimes the video is not respecting the startSeconds parameter mostly if the page is loaded when the video DIV is outside the viewport.
In this case the first video should start in the second 30 (as tou can see below in the video parameters) but it starts from the second 0.
video parameters:
var ystv1 = [{
'videoId': 'Gc2en3nHxA4',
'startSeconds': 30,
'endSeconds': 45,
'suggestedQuality': 'hd720'
},{
'videoId': 'Gc2en3nHxA4',
'startSeconds': 65,
'endSeconds': 90,
'suggestedQuality': 'hd720'
}, ],
Here the code example: https://codepen.io/ysanmiguel/pen/WEGwqO
any help or suggestion to fix this problem or improve the code?
thank you very much.
Same scenario is required in this SO post.
Here is the main problem of the user:
For my project I need to be able to control the current time that the
video is playing. I have searched the You-Tube API notes and data but
could not find a parameter nor a function that enables me to set the
current time of the video (There is a GET for the current time but not
a set).
You may also try the answer in this SO post and visit the following documents.
https://developers.google.com/youtube/js_api_reference
https://developers.google.com/youtube/youtube_player_demo
First you need a JS reference to the Player object. For a quick start,
please take a look at the following Question:
How do I get the reference to an existing YouTube player?
With this reference you can do:
player.seekTo(42); //Go to 42 seconds
I'm using Fancybox to play a youtube video. Works as expected. Video pops up and plays great.
However, I would like to use both AUTOPLAY and Start Time when my video is clicked.
Here is the URL I'm trying.
http://www.youtube.com/watch?v=BwaKZ4r5fQM&autoplay=1&t=0m47s
Autoplay works fine, but the start time is ignored.
Any suggestions?
Thanks!
The easiest way to do is using fancybox media helpers so
1). Load the fancybox media helper js file :
<script type="text/javascript" src="{your correct path}/helpers/jquery.fancybox-media.js"></script>
2). Only set your youtube URL without any parameter like :
<a class="fancybox" href="http://www.youtube.com/watch?v=BwaKZ4r5fQM">Start YouTube in fancybox at 47 secs</a>
3). Enable the media helper in your fancybox custom initialization script and pass the youtube parameters using this format :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
helpers: {
media: true
},
youtube: {
autoplay: 1, // enable autoplay
start: 47 // set start time in seconds (embed)
}
}); // fancybox
}); // ready
NOTE : the media helper will convert the video URL in its embed format like :
http://www.youtube.com/embed/BwaKZ4r5fQM
... where the parameter t={mm}m{ss}s is not longer valid.
With youtube embedded player you can select the start time using the start parameter followed by the number in seconds of the wanted starting time (as we did in the fancybox initialization script)
If I load the video by passing the file at initialisation time, it works:
var jw = jwplayer('container').setup({
width: 528,
height: 295,
skin: 'skins/rizla/rizla.xml',
bufferlength : 0.1,
modes: [
{type: 'flash', src: 'jwplayer/player.swf'},
{type: 'html5'}
],
file : 'http://full/path/to/video.mp4',
});
However, if I used the load method from the player API, it plays fine in browsers (with Flash disabled so the HTML5 version loads) but won't play on the iPad / iPhone (but with no errors displayed):
jw.load({file : 'http://full/path/to/video.mp4'});
Examining the results of jw.getPlaylist() for each type of loading reveals very different values but that might unrelated to the issue.
Note: The video plays fine when linked to directly, opening in the default media player so it's not a video issue but a jwPlayer-specific issue.
It seems to work in version 6.0. See js fiddle:
http://jsfiddle.net/hRAKQ/4/
var jw = jwplayer("test").setup({
file: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
});
$('button').on('click', function() {
jwplayer("test").load([{
file: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
image: "http://lorempixel.com/320/180/"
}]);
});
Actually this the first time I'm gonna use jplayer plugin, so all I need is to play a sound clip (2 sec) when I click on a div, and I don't know how to use jplayer!
I also need to load the sound clip file in cache as well as the page is loading, so when I click that div the sound clip plays immediately without loading it when clicking
btw, is it possible to do that without using jplayer, jquery maybe?!
If you want to stick with jPlayer, try setting warningAlerts and errorAlerts to true.
$(id).jPlayer( { warningAlerts: true, errorAlerts: true } );
This may solve your problem.
But as long as you only need sound (no video), SoundManager 2 might be a better fit for you. Its really robust and provides extensive debugging output.
soundManager.url = './swf/'; // directory where SM2 .SWFs live
var mySound;
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'someSound',
url: '/path/to/some.mp3'
});
});
//....
//if(xhr-stuff)
if(mySound)
mySound.play();
Use soundmanager2.js for testing and soundmanager2-nodebug-jsmin.js for production. If you have further questions, don't hesistate to ask.
-snip-
scratch that... there's an api
http://www.jplayer.org/latest/developer-guide/#jPlayer-play
Use
$("#jpId").jPlayer("play");