so I have a database with user uploads. Users can either upload images, or videos.
On an admin page, these videos/images should be diplsayed.
What works is the following:
<repeat group="{{#userUploads}}" value="{{#upload}}">
<div class="col-sm-4">
<video style="width:100%;" controls>
<source src="/{{#upload.path}}"/>
Your browser does not support the video tag.
</video>
<img src="/{{#upload.path}}"/>
</div>
</repeat>
Yes, I'm using Fat Free Framework, but doesn't change any behaviour here, so it doesn't really mind for the quesiton.
Now as mentioned, this works, but also displays both (working video and not working image or working image but not working video)... I've tried nesting the image into the video tag, however, this doesn't work either.
Is there any way I could reach the effect, that depending on the path (respectively the image filetype), I display the correct thing (image or video)? My only idea so far is checking the src of each tag with JS after creation and then hiding the thing, where the filetype doesn't match, however, this seems like a pretty ugly solution for me (first displaying everything, then checking for various filetypes, where I could forget things, etc.)
Use php exif_imagetype() function to test if it's a image. Although I would suggest to do it before storing to database.
Related
I am using Firefox on Ubuntu Linux for testing. If I put the following link to an MP4 file in a page, the MP4 file plays in the browser window without any need for additional scripts or players:
<img src="/video/thumbnails/test.png" alt="" />
However, I want to be able to stay on the same page, and play the video in a popup window, with the rest of the screen darkened. I believe this effect is called a "lightbox".
Thinking I could just use any lightbox and leave it to the browser to play the video file, I found an open source Javscript library for doing the lightbox effect, called Lightbox2. It's light and simple.
Following the instructions, I loaded the Javascript in the <head> of my web page, and then I added data-lightbox="image-1" to the link:
<img src="/video/thumbnails/test.png" alt="" />
When I click on the thumbnail image, the lightbox effect works, but the video does not display or play. The lightbox darkens the screen and displays a white square in the middle with no video file or player controls.
I know there are Javascript lightbox effects designed for playing videos, but, since the browser can play videos anyway, what differentiates those Javascript libraries from the one I'm using?
Why can't I play a video in this simple lightbox effect?
Can it be modified to play video, or do I need to scrap it and find a different library? Recommendations for similar video capable libraries are very welcome.
I'm really sorry for getting back on this so late.
Okay so just an approach I had in mind at that time. It's left to you if you wanna try this out. But, if you want to avoid using third party scripts that you might have trouble tweaking here's simple approach. preferably, I'm going to use jquery code here just to make it look nice.
so lets say you want to have the video appear to pop up when the link is clicked. Why not just have our own div that contains a video element and then keep it hidden till we need it.
.
.
.
<body>
<div id="vid-container" style="display:hidden;position:fixed; background: rgba(0,0,0,0.5);
padding:40px; text-align:center;">
<video id="vid"/>
</div>
</body>
.
.
.
So, basically what I'm intending to do is that when a person click's on a video link, we'll use some jquery to toggle the popup div. As you can see that in the video tag I've only specified the id. This is only because I'm intending to set the video src and the codec after a particular link is clicked via javascript ( and a little bit of jquery).
So suppose we have a link like so:
<a href="Link_URL" class="vid-link" ><image src="img_URL" class="vid-img"/></a>
And a person clicks on it, this is how I though you could handle it through the following script.
<script>
$(window).load(function(){
// first of all I'm manually setting the pop's width and height to fit the entire screen
$("#vid-container").css("width",window.innerWidth+"px");
$("#vid-container").css("height",window.innerHeight+"px");
$(".vid-link").bind("click", function(){
// first get the video url from the link href
var vid_url= $(this).attr("href");
// now grab hold of the video and set it up by plugging in the video url
var video= document.getElementById("vid");
video.type="video/.mp4";
video.src="+vid_url+";
video.controls=true;
video.autoplay=false;
// now toggle the popup visible
$("vid-container").fadeToggle("slow");
});// end of click handler
});// end of window.load event
</script>
We'll I think that should solve the bare necessities of your requirement. You could do alot more with it.
Hope this helps :)
Viva la HTML5!
I already looked all around StackOverflow and Google to find a solution to this question but so far no luck.
Got a HTML page with dynamically rendered content from Django. All works good with standard text and images, however from time to time it also shows HTML5 Video element which in screenshot appears as a black image and thats it. Adding poster to it did not help. Does anyone know is it somehow possible to actually take screenshot of html5 video element? (not flash etc)
If not, my 2nd approach was to create a js variable with html content inside and then replace video with image created from poster attribute of the video. After that send that js variable to html2canvas for screenshot. Reason for this is I CAN'T alter page look and feel for user so I need to do this stuff in the background somehow. Idea was to use
var content = $(".content").html();
content.replace(video, image); // pseudo here for sake of question
html2canvas(content, { ...
However this only keeps giving me Uncaught TypeError: Cannot read property 'images' of undefined so that idea fails...
Does anyone know how to make this to actually work or maybe has any other idea how to replace video with image for the sake of html2canvas screenshot but with user not seeing any changes on the website?
Thanks a lot in advance!!!
It is possible to capture html5 video element onto the "screenshot" presuming it doesn't taint the canvas (i.e. cross-origin content).
Currently, html2canvas doesn't support capturing videos nor poster images, but pull requests are always welcome.
I'm building a image-intensive web-page. I just popped in all the images and the site got really slow. Not just loading but also browsing etc.
Is there any good way to tell a browser that images are not necessary to load yet? For example in css:
display:none
or maybe instantiating the images with javascript somehow.
Currently all images are specified in the html, if possible I would like to keep to like that.
<img id="myID" src="about:blank" alt="" />
document.getElementById("myID").src="/image1.jpg";
I have to admit though, I have not used a blank image tag before, but If needed I have always appended an image to a container dynamically
document.getElementById("myDivID").appendChild('<img id="myID" src="image1.jpg" alt="" />');
I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.
Is there a way to get moxie player, which is packaged with TinyMCE, to display a splash image when you embed a video via the WYSIWYG tool? I've been Googling and playing with it for a while with no success at this point. I'm using TinyMCE 3.4.2 in production and have tried 3.4.3 in development, but it doesn't seem to work correctly. Honestly, I'm not even sure what the actual params are for this player since the documentation on the legal flashvars appears to be non existent. From what I can tell, the "poster" param should be what I need, but setting that when I embed the video object seems to do nothing. The only official documentation I've found so far is: http://tinymce.moxiecode.com/wiki.php/Plugin:media and that just gives the general params to pass into TinyMCE for the media plugin itself, not how to actually use the player.
Here is what I'm currently setting in the flashvars param tag
<param name="flashvars" value="url=http%3A//url/to/some.flv&poster=http%3A//url/to/some.jpg" />
Any ideas? I'd prefer to keep using the stock TinyMCE implementation if at all possible and this player, along with the WYSIWYG tool otherwise addresses the business issue perfectly for my company.
You can't do it with current version of moxieplayer.
swfdump (from Flex SDK) on moxiplayer.swf doesn't show any reference to the poster parameter, just the url one.
This is an open request feature. Just vote for it!
Currently you can only set a poster image using the HTML5 Video tag. You can validate this here by clicking the insert media button, selecting HTML5 video and assigning a poster image in the advanced tab.
After that just hit submit to see the resulting example and the corresponding HTML.