I embed videos into my web site, works great in all browsers but on firefox shows up a black screen, any idea? Using the iframe mode. Funniest thing is that some show up and some don't using the same embed method for all.
rob.m - yup, showing and hiding vimeo videos will cause that random black screen to appear. I JUST ran into this on a project, and tore my hair out for the better part of a day figuring out why.
If you NEED to show/hide videos, and you NEED the black screen to not show up, you will have to use the old school flash embed. That will work.
It's a trade off - consistent embed images = flash OR inconsistent embed images = universal method (read: HTML5 w/ flash fallback).
[Brief rant: the Vimeo API documentation leaves a LOT to be desired]
If you need to further interact with these videos that you show/hide, and plan to use the Vimeo API to do so, I found that I had to use the SWFobjects library method. See this forum post for more: http://vimeo.com/forums/topic:44521 - specifically, the second to last post.
Eventually i came up with using this:
In the main page I have a element which i then populate and replace with the iframe. Thanks
Main page:
<span class="video clearfix" data-vimeoid="<?php echo the_field('vimeo') ?>"></span>
Content page to be loaded:
var url = this.href + " .content";
var videoSpan = infoBox.find("span.video");
var iframe = $('<iframe/>', {
'frameborder' : 0,
'width' : '692',
'height' : '389',
'src' : 'http://player.vimeo.com/video/'+ videoSpan.data("vimeoid") +'?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);
Related
I am currently having an issue with any background videos playing in Safari. Below are some links. It shows the Black Background that doesn't display the Background Video we have in place for some of our posts.
I have them all set in a custom Post Type in the Backend of of our WordPress websites using the WCK plugin and created a custom fields creator for our videos. To print them out, I have them set in the single-sponsored post PHP file.
Here is the code to link it altogether.
Code For the Entire Video Encoding in PHP in our Single Post File com/6foGw.png
Here are some links to what posts I am talking about. (Make sure to be in Safari to get the bug)
http://landscapemanagement.net/sponsoredcontent/how-to-get-the-most-out-of-any-trenching-project/
http://www.mypmp.net/sponsoredcontent/how-to-repel-birds-from-any-environment/
Is there a workaround for this as it is just displaying to black in the Safari Browser?
Please let me know whenever you can.
Review the changes to autoplay video in Safari that are referenced here: https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/
Here's the gist of how to detect if autoplay is available using JS:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
I'm using Extjs along with PHP (no framework) in one of my projects. I've a requirement to play video on the same panel/tab without opening a new one. I can download videos by clicking on the download button or clicking on the link to video, present on the panel. But I need to play the video on the same page without affecting it's quality. (Generally using .mp4 videos).
I've not found any helpful method/feature with Extjs so far.
I set up a website with ExtJS 4.2 and included several mp4 videos. It is pretty easy. If you want to place the video into a window, here is some code that might help you.
window = Ext.widget('window',{
x:5,
y:5,
renderTo: Ext.getBody(),
width: 410,
height: 265,
html: '<video width="400" controls><source src="test.mp4" type="video/mp4"><source src="test.ogg" type="video/ogg"></video>'
}).show();
You should use some html5\flash video player (for example flowplayer), then render player (read player docs how to do this) to specific html element.
container.add({
xtype: "panel",
html: '<div id="place-for-video"></div>',
listeners: {
show: function() {
// Create your player instance and render him to html element with id "place-for-video"
}
}
});
//
I have just got introduced to the, html5 media capture API and im ready to give it a try. I have seen this capture being displayed on the same page but i have yet to see anybody speak on streaming via the server. so what im asking is there a way to avoid flash,silver light and capture the camera, mic and display this to another page on the site for my other users to view ? like a live stream for the entire site ?
js
function fallback(e) {
video.src = 'fallbackvideo.webm';
}
function success(stream) {
video.src = window.URL.createObjectURL(stream);
}
if (!navigator.getUserMedia) {
fallback();
} else {
navigator.getUserMedia({video: true}, success, fallback);
}
html:
staff.php - user page that will capture the stream
<body>
<div id="canvas-capture"></div>
</body>
cams.php?modelkey=34223r528edfwd23rfwedcwe - page where i want the stream shared
<body>
<div id="canvas-capture"></div>
</body>
Yes, you can display the captured video elsewhere. The success callback that you pass togetUserMedia will be invoked with the media stream object from which you can generate a URI that can be specified as the src attribute of a <video> tag on your other page.
More information and code snippets can be found on the html5rocks Getting Started with WebRTC page.
(P.S. I should note that you use the server to relay communication tokens between browsers, but then the streaming happens directly between browsers and is not done through your server).
i'm using shadowbox for my website to open the big images with clicking thumbnails as you know. My Problem is, i'm fetching the users' facebook profile photo like :
$large = "https://graph.facebook.com/{$id2}/picture?type=large";
$small = "https://graph.facebook.com/{$id2}/picture?type=square";
And it's working perfect, but in shadowbox i have problem with large image..
I'm calling this in shadowbox like :
<a href="<?php echo $large; ?>" rel="shadowbox">
<img style="max-width:50px; max-height:50p;" src="<?php echo $small; ?>" />
</a>
As you can imagine, small image is showing perfect, but when i click on the small image which has href, it fails to show the large image.
I've tried to change large image variable to this :
$large = "https://graph.facebook.com/{$id2}/picture?type=large&redirect=false";
but also it has failed to show the large image..
Hope you can help, thank you
I haven't worked with Shadowbox before, so I don't know how it works behind the scenes. It may be that it can't deal with a url that returns another url for the large image.
Try making the API call with php and then passing this result to shadowbox.
$large = file_get_contents("https://graph.facebook.com/{$id2}/picture?type=large&redirect=false");
Of course, using file_get_contents() like this is a quick and dirty method. If it works, before you roll this out to a production site, you'll want to use cURL or better yet the Facebook PHP SDK to do this.
Assuming you're using shadowbox to show multiple users' photos on a page, you'll probably end up bumping into the API limits at some point. To prevent this, redo your API calls to grab multiple photos in one shot:
$large_photos = $fb->api('/picture?type=large&redirect=false&ids=' .
implode($ids_array, ','));
https://graph.facebook.com/{$id2}/picture?type=large&redirect=false basically returns you a text content the URL of the image. That's why it's not showing.
Eg.
https://graph.facebook.com/yungsenriady.budiman.3/picture?type=large&redirect=false
returns
"https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/157348_100001167523294_1569184886_n.jpg"
Try just use
https://graph.facebook.com/{$id2}/picture?type=large
I have a need for getting preview a url over mouse hover, my application is built on php , js and jquery. Although I have an idea of to get to my requirements but am a little confused with the right approach, i checked all the posted question on here but most of them refer to some third party tools or installables. Frnakly i do not want to use them and think i should try one on my own. Please can you guide me through on the best possible step as per you?
Thanks!
11-Jun-2012
Finally I managed to use Curl and get a preview of the site on a Div placed next to the Link on my site, well now the problem is of fitting the content in the Div ..is there a way that I can adjust the css of the extracted html page in such a way that all the content fits in the fixed height and width of the Div.scaledown option or something? that would scale everything down to the required proportion?
You can do this, in plain ol' CSS and HTML:
.mouseover {
position:absolute;
width:200px;
height:200px;
top:5px;
left:5px;
display:none;
}
.link {
position:relative;
}
.link:hover .mouseover {
display:block;
}
Then, in HTML:
<a href="#" class="link">Link
<div style="background:url('<URL HERE>')" class="mouseover"></div>
</a>
Ok, so you want to get a thumbnail of a webpage and show it on mouse over. To do that, you'll need to either use tools that generate thumbnails or write a PHP script yourself. Here are some tools:
websnapr
Website Thumbnail Generator - This one you can install on your own server
If you want to write your own, check out imagegrabwindow. Note that it requires a Windows server. I don't know if PHP has any other methods to do this. If you're not on a Windows server, you could write a bash script to open a browser and use a screenshot utility to take a screenshot and save it to a file for your website to pick up.
You'll also have to make sure to have some sort of cache so you're not doing this every time every user moves their mouse over a link.
You can use urlbox.io for this, here's an example preview thumbnail of this very URL:
https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400
You can see that the options passed into the Urlbox API are simply url, and thumb_width to set the desired width of the thumbnail in pixels, in this case I chose 400 pixels wide.
Now all you got to do is embed it in an <img> tag like so:
<img src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400"/>
You can use API to do this. For example ApiFlash has a free plan that you can use up to 100 screenshots per month.
Here is how it would look like with PHP:
<?php
$params = http_build_query(array(
"access_key" => "YOUR_ACCESS_KEY"
"url" => "https://example.com",
));
$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
file_put_contents("screenshot_api_example.jpeg", $image_data);
?>
The API has a very good uptime because it's based on AWS Lambda.