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.
});
}
Related
full screen button in video tag missing when page containing video is loaded externally on another pages div
I have a page external.php . In this page when i use the following code
echo
'<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>';
i get a video with full screen button in it on chrome.But when i try to load this external.php on another page (home.php) div the video is coming but the full screen button is missing.But in IE there is no such problem.
You can either solve this via CSS OR Fullscreen API.
1. CSS
I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure. The following solution is webkit specific.
You need just to write this code in your css:
video::-webkit-media-controls-fullscreen-button {}
2. Full screen API
If you want to accomplish it by Fullscreen API check below demo first:
Demo Full screen video
As you can see a very simple demo showing HTML5 video in full screen, make sure you're using Chrome dev, webkit or firefox nightly.
For more detail you can check it here.
Browsers may provide a user interface, but shouldn't provide a programmable one.
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 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);
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.