I have a problem which is probably easy to solve but i has not yet found a solution. I try to initialize Flowplayer with the OVA (Ad management) plugin. If I set the parameter "autoPlay" = false on a clip the player won't autoplay on initialization. Just as I wan't it. However, if I have, let's say a pre-roll, managed by the OVA plugin it will play once you hit the Play button. But once the pre-roll has finished the main clip won't autoplay. The user has to hit "Play" again.
So the question is: How do I use Flowplayer with OVA and the player shouldn't autoplay until the user hits "Play" but once a pre-roll (or any other ad) has played it should continue to the next clip?
flowplayer( "elementID", "flowplayer.commercial-3.2.15.swf",
{
clip:
{
url: "video.mp4",
autoPlay: false
},
plugins:
{
ova:
{
url: "ova.swf",
ads:
{
schedule:
[
{
position: "pre-roll",
server:
{
type: "direct",
tag: "vast.url"
}
}
]
}
}
}
}
);
Maybe it's too late for a response, but for the ones visiting this post henceforth, the answer is to put autoPlay:false inside the "ova" object, instead of the "clip" one:
ova: {
url: "ova.swf",
autoPlay: false,
// ----- "general" options here -----
}
Related
I'm developing an application in Angular to capture a photo with the maximum possible quality depending on the device's camera.
Currently, I have this code:
HTML:
<video #video id="video" autoplay muted playsinline></video>
Angular TS:
_requestCameraStream(width: number, height: number, secondTry: boolean) {
if (navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices
.getUserMedia({
video: {
facingMode: 'environment',
width: { ideal: width },
height: { ideal: height },
frameRate: { ideal: 30 },
},
})
.then(stream => {
console.log('_getUserMedia -> stream loaded');
this.loadStream(stream);
})
.catch(err => {
console.log(err);
if (!secondTry)
{
console.log('Started second try');
this._requestCameraStream(2560, 1440, true);
}
else
{
this.router.navigateByUrl('id-document/camera-error');
}
});
}
}
private loadStream(stream: MediaStream) {
const videoDevices = stream.getVideoTracks();
this.lastStream = stream;
this.video!.nativeElement.srcObject = stream;
this.video!.nativeElement.play();
this.ref.detectChanges();
}
Basically I check if the device has a camera available and try to load it with the width and height values that the function receives. On the first try I call the function as follows:
this._requestCameraStream(4096, 2160, false);
If the stream fails to load (probably because the camera does not support 4k quality) then it tries again with the values this._requestCameraStream(2560, 1440, true);
This is actually working pretty well on most devices, but on a Galaxy Note 10 Plus, the stream does not load, but if I click the button to take the picture, the camera does capture the image in 4k quality.
I suspect that the camera has a higher resolution than the screen, so the camera can capture a 4k image, but the screen can't load a 4k video as a preview. The problem is: the system does not trigger any warning or errors that I could capture. It is as if the preview loaded successfully.
How can I detect and treat this error? Or maybe, is there any other way that I can request the camera to capture a maximum quality image with the preview loading correctly?
You can try defining a range of resolutions instead of trying only two
async _requestCameraStream() {
if (!navigator.mediaDevices.getUserMedia) return;
try {
const stream = await navigator.mediaDevices
.getUserMedia({
video: {
facingMode: {
exact: "environment"
},
width: { min: 2288, ideal: 4096, max: 4096 },
height: { min: 1080, ideal: 2160, max: 2160 },
frameRate: { ideal: 30 },
},
});
if(stream) {
console.log('_getUserMedia -> stream loaded');
this.loadStream(stream);
}
}catch (err) {
console.log(err);
this.router.navigateByUrl('id-document/camera-error');
}
}
I think your current approach is correct to capture the maximum quality image. I have used a similar approach in one of my projects. I think the problem is with the video playback. There is an autoplay policy in the browser it behaves differently in a different browser. This browser policy does not allow to play video content without any user intervention. Check this URL, https://developer.chrome.com/blog/autoplay/
I think you should add a muted attribute in the video element and would be better if you ask the user to click before capturing the camera stream. May be this does not solve the problem which you are facing but this problem will be there in some browsers like iPhone. Apple devices do not allow any video content without user intervention.
Regards,
omi
I am trying to add a video library (I want to use multiple files that will play in random order) as a background and can't find a way to do it in js
my html file includes this js script and I want the script to play multiple files, can't seem to find a way to do it.
// Video element
videoEl: document.querySelector('#background_video'),
// Container element
container: document.querySelector('body'),
// Resize
resize: true,
// autoplay: false,
isMobile: window.matchMedia('(max-width: 768px)').matches,
playButton: document.querySelector('#play'),
pauseButton: document.querySelector('#pause'),
// Array of objects containing the src and type
// of different video formats to add
src: [
{
src: 'jews.mp4',
type: 'video/mp4'
},
{
src: 'jews.webm',
type: 'video/webm;codecs="vp8, vorbis"'
}
],
// What to do once video loads (initial frame)
onLoad: function () {
document.querySelector('#video_cover').style.display = 'none';
}
I am trying to set the getusermedia video constraints like setting min/max frame-rates and resolutions etc... in my peer.js webrtc application which is a simple peer to peer chat application. I have being trying to integrate it into my application but it seems to break it.Any help would be greatly appreciated other online tutorials look different to my app set up. Down at function 1 is where I have been trying to set the constraints it just doesn't show the video anymore. Is this the correct place?
Also will these constraints work on a video-file playing instead of the webcam?. I am using the Google chrome flags that plays a video file instead of a camera.
navigator.getWebcam = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
// PeerJS object ** FOR PRODUCTION, GET YOUR OWN KEY at http://peerjs.com/peerserver **
var peer = new Peer({
key: 'XXXXXXXXXXXXXXXX',
debug: 3,
config: {
'iceServers': [{
url: 'stun:stun.l.google.com:19302'
}, {
url: 'stun:stun1.l.google.com:19302'
}, {
url: 'turn:numb.viagenie.ca',
username: "XXXXXXXXXXXXXXXXXXXXXXXXX",
credential: "XXXXXXXXXXXXXXXXX"
}]
}
});
// On open, set the peer id so when peer is on we display our peer id as text
peer.on('open', function(){
$('#my-id').text(peer.id);
});
peer.on('call', function(call) {
// Answer automatically for demo
call.answer(window.localStream);
step3(call);
});
// Click handlers setup
$(function() {
$('#make-call').click(function() {
//Initiate a call!
var call = peer.call($('#callto-id').val(), window.localStream);
step3(call);
});
$('end-call').click(function() {
window.existingCall.close();
step2();
});
// Retry if getUserMedia fails
$('#step1-retry').click(function() {
$('#step1-error').hide();
step();
});
// Get things started
step1();
});
function step1() {
//Get audio/video stream
navigator.getWebcam({audio: true, video: true}, function(stream){
// Display the video stream in the video object
$('#my-video').prop('src', URL.createObjectURL(stream));
// Displays error
window.localStream = stream;
step2();
}, function(){ $('#step1-error').show(); });
}
function step2() { //Adjust the UI
$('#step1', '#step3').hide();
$('#step2').show();
}
function step3(call) {
// Hang up on an existing call if present
if (window.existingCall) {
window.existingCall.close();
}
// Wait for stream on the call, then setup peer video
call.on('stream', function(stream) {
$('#their-video').prop('src', URL.createObjectURL(stream));
});
$('#step1', '#step2').hide();
$('#step3').show();
}
Your JavaScript looks invalid. You can't declare a var inside a function argument list. Did you paste wrong? Try:
var constraints = {
audio: false,
video: { mandatory: { minWidth: 1280, minHeight: 720 } }
};
navigator.getWebcam(constraints, function(stream){ etc. }
Now it's valid JavaScript at least. I'm not familiar with PeerJS, but the constraints you're using look like the Chrome ones, so if you're on Chrome then hopefully they'll work, unless PeerJS does it differently for some reason.
Your subject says "WebRTC Camera constraints" so I should mention that the Chrome constraints are non-standard. See this answer for an explanation.
I'm learning how YouTube player works with Javascript. I have this code because I want to make a video gallery and it works perfectly in any browser (the idea is to switch between videos by the ID), the problem is when I try to test in on my ipad it doesn't display anything. Any suggestions for iOS?
Thanks in advance!
swfobject.embedSWF("http://www.youtube.com/v/3sL8aaMw7ZQ?enablejsapi=1&rel=0&fs=1",
"ytplayer-temp",
"400",
"226",
"10.1",
false,
false,
{ allowScriptAccess: "always", allowFullScreen: "true" },
{ id: "ytplayer" }
);
function ytplayer_loadvideo(id) {
var o = document.getElementById("ytplayer");
if (o) {
o.loadVideoById(id);
}
}
No flash support for iOS. You have to use html5 instead.
https://developers.google.com/youtube/getting_started
I have the following js. If the flv url doesn't exist the onError function is called which is great.
However currently it displays the alert and then proceeds to display an unfriendly error message. How can i override this message with something more user friendly.
$f(videoid, "/swf/flowplayer-3.1.5.swf", {
playlist: list1,
wmode: 'opaque',
plugins: {
gatracker: {
url: "/swf/flowplayer.analytics-3.1.5.swf",
trackingMode: "Bridge",
debug: false
}
},
onError: function(err) {
alert('Error Code: ' + err);
}
});
You should also be sure to set the player property showErrors to false. That way the ugly boxy error won't show up in the video player frame.
Not really sure what you had in mind but you could do something like this.
Place this where you want your error message to show
<div id="errorbox"></div>
Paste this in your CSS
#errorbox{
color: #D8000C;
border: 2px solid #D8000C;
background-color: #FFBABA;
}
And change the javascript to this
$f(videoid, "/swf/flowplayer-3.1.5.swf", {
playlist: list1,
wmode: 'opaque',
plugins: {
gatracker: {
url: "/swf/flowplayer.analytics-3.1.5.swf",
trackingMode: "Bridge",
debug: false
}
},
onError: function(err) {
$('#errorbox').text('Your error message.... '+ err).fadeIn('fast');
}
});
What this will do is make an error message show up where ever you pasted that HTML in a nice user friendly way. Hope this helps, but it's hard to know exactly what you mean.