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"
}
}
});
//
Related
Is there any way to add the fullscreen option to the PDF that is embedded using iframe ?
<iframe src="http://www.web.com/test.pdf"></iframe>
You can't reliably control the PDF experience unless you replace the default viewer of the browser. They all behave slightly differently. However, the new free Adobe DC View SDK is a client-side JavaScript PDF viewer that will allow you to embed a PDF in your HTML page and it has a full-screen option. By using this viewer, the PDF will behave consistently and have a consistent UI across all browsers.
The code would look like this...
<div id="adobe-dc-view" style="height: 360px; width: 500px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView =
new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData:{fileName: "Bodea Brochure.pdf"}
}, {embedMode: "SIZED_CONTAINER"});
});
</script>
You can get the clientID here.
https://www.adobe.io/apis/documentcloud/dcsdk/viewsdk.html
Adobe DC View SDK kept throwing errors constantly for some reason. So I tried Mozilla’s PDF.js and seems to be working just fine, even on mobile.
I have a wp site that in a lot of posts i am using youtube videos embeded with the clasic iframe.
Is possible to find the iframe div inside post and replace it with a custom youtube code?
I want to use the code bellow to control youtube video. When it starts, when it is finished.
The code that i have in my posts is:
<iframe width="824" height="464" src="//www.youtube.com/embed/eEqIBzxHjiA?rel=0" frameborder="0" allowfullscreen></iframe>
And i want to replace it with:
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'eEqIBzxHjiA',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert ('FInished');
}
}
</script>
Thank you guys...
use shortcodes
1. The WordPress Rich Editor might strip out JavaScript src tags so best is to write a little plugin that defines a shortcode e.g. [myyoutube id=eEqIBzxHjiA] and use that one from now on. Probably you want to define a javascript .js file that holds the main code and include that in each page where the shortcode is present. So all of the above except the player ID will be in the included .js file that you define in the shortcut code. only the playerId is then a call to the javascript function.
legacy
2. For all the existing entries: probably the fastest to use a sql command on the database posts table and replace all entries matching the regex above with the new shortcode tag. (fastest way)
I'm creating a slideshow with 5 frames (each of which will have its own slideshow of images) with huge images and it takes some time for the first few images in each frame to be loaded(the rest of the images are loaded really fast). So I was thinking I could preload a simple black images (the background is black) and then start my slideshow once I know the images have loaded. Also, the slideshow images are dynamic, ie their urls change every day.
Does anyone know how I could do that? Because what I've found online only preloads an image but says nothing about how to start my slideshow after that.
Or if anyone has a better solution, please let me know!
FYI, for the slideshow I've used PHP to extract the image urls into a file and JavaScript to read them from it and display them in the slideshow.
Thanks!
A good way to preload images is to load them outside of the frame using css with position: absolute, i can remember reading that using display: none; it would not get downloaded by Safari.
This seems to be an elegant way to precache the images.
"Per Paul Irish, the canonical plugin for detecting image load complete events is now at:
https://github.com/desandro/imagesloaded"
Source: jQuery event for images loaded
This should work
/*You could populate this array through an xml to something if there are too many images*/
var arrUrls = ["image1.jpg", "image2.jpg", "image3.jpg"];
var nLoadCount = 0;
for(var i=0;i<arrUrls.length;i++)
{
var oImage = new Image ();
oImage.onload = function ()
{
nLoadCount++;
if(nLoadCount == arrUrls.length)
{
/*Show your content here*/
}
}
oImage.src = arrUrls[i];
}
I have a site where people post news, it is written in PHP.
Up to now, people who post stories had a textarea for the text input, and a form field to upload an image for the story.
Now I am upgrading the site, and I am considering giving people more flexibility, so I plan to use a javascript WYSIWYG text editor.
After reviewing the most popoular, or at least the ones I found googling, I think tinyMCE is the best documented and thats why I think I'm going to go with it, though I've just worked with it for around 4-5 hours, so I don't really care if I'll have to switch to another editor.
When you drag-drop images in the textarea, tinyMCE encodes the image in base64 and uses it as the src attribute for the image tag.
I was wondering, is there a way to make tinyMCE upload the images to the server as files so that I can handle them with php (make thumbnails, name and store them as I wish)?
If not, is there an editor where that would be an option?
I recommend "Responsive File Manager"
Which is a free open-source file manager and image manager made with the jQuery library, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos.
GREAT FEATURES :
Upload files with a simple drag & drop.
Use as stand-alone file manager, as TinyMCE, CKEditor or CLEditor plugin or as crossdomain.
Many customisation parameters such as Automatic resizing of uploaded
images, Optional limiting of image dimensions, Files allowed lists.
Full preview of uploaded images, videos and audios.
Automatic creation of thumbnails and Automatic realignment of thumbnails after external changes
and ...
There is another plugin for tiny mce which is free and open source. You can use this
http://justboil.me/tinymce-images-plugin/
There is a paid plugin file manager called MCImageManager
Or you could integrate uplodify or such into the add image popup, then when an image is uploaded update the tinyMCEImageList.js file.
Here's a simple option for uploading images from TinyMCE directly from a toolbar button using Plupload without needing additional popup windows. Note - this allows you to select the file using your file picker but doesn't support drag drop.
Add a button to tinymce with an ID 'mybutton' and no click event:
tinymce.init({selector:'.use-tinymce',
plugins: "code link visualblocks",
menubar: false,
extended_valid_elements : "span[!class]",
toolbar: "undo redo | formatselect | link code | mybutton",
visualblocks_default_state: true,
setup: function(editor) {
editor.addButton('mybutton', {
type: 'button',
title: 'Insert image',
icon: 'image',
id: 'mybutton'
});
editor.on('init', function(e) {
var pluploadHandler = new PluploadHandler(jQuery, plupload);
});
}
});
Reference this button in the Plupload initialization:
var PluploadHandler = function( $, plupload ) {
...
this.uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : document.getElementById('mybutton'),
url : '/path/to/upload/the/image',
You'll need to write the server side code for your upload path /path/to/upload/the/image to save the image and respond with the URL to the new image.
Lastly catch the uploaded response and add your image tag to TinyMCE:
this.uploader.init();
this.uploader.bind("FilesAdded", handlePluploadFilesAdded);
this.uploader.bind("FileUploaded", handlePluploadFileUploaded);
function handlePluploadFilesAdded(up, files) {
console.log("+ handlePluploadFilesAdded");
up.start();
}
function handlePluploadFileUploaded(up, file, res) {
console.log("++ res.response: " + JSON.stringify(res.response));
var img = "<img src='" + res.response + "?" + Date.now() + "'>";
tinymce.activeEditor.execCommand('mceInsertContent', false, img);
}
}
Full source code is here (Tested on TinyMCE 4.1.9; Plupload 2.1.2):
https://gist.github.com/danielflippance/e1599fd58ada73b56bfb
Try PDW File Browser. Unlike its web page, it is really good (and intuitive, in my opinion, since it offers GUI similar to MS Windows File Explorer).
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);