This is more for Youtube developers than the populace at wide since the API documentation mentions their developers watch here.
Can you please add an option to the Youtube iframe API to allow the cover image to be displayed with a 'background-size: contain' vs the default 'background-size: cover'.
Anytime I embed a Youtube video to a div that is not properly proportioned to the cover image 1920x1080, the image gets cut off. Currently the only solution available to me for a responsive layout is to use JavaScript & resize events to dynamically change the proportion of the container element. This is a very unnecessary use of JS for something that is literally as simply as a CSS value that could be an option in the API when I create my player. Something like the code block here.
player = new YT.Player(
'ytPlayer',
{
height: '100%',
width: '100%',
'background-color': '#000',
videoId: [video id],
playerVars: {
autohide: 1,
autoplay: 0,
coverimagesize: '[contain/cover]'
}
}
);
Related
I want to create a website homepage made up of only a 360 viewer showing a photorealistic 3d model which you can navigate around and interact with (WEBVR style) however, what i am trying to identify is will it be possible to embed a 2nd 360 viewer into this so that while navigating and you get to a specific point, you may want to view another 360 image / video within the current one.
looking at using A Frame for 1st 360 image and an embedded viewer into that. A
solution has been proposed using advanced techniques within WebGL, but i dont know enough about it to make this decision.
Site needs to be responsive and compatible with standard browsers, tablets and mobile and (fingers crossed) option to use headset
any advise / suggestion would be greatly appreciated !!!
Imo the biggest part here is the design.
As for compatibility, keep in mind that PC (mouse) / mobile (gaze) / HMD (controllers) need different UI's.
As for 360 in 360. There is no need to embed anything.
1) Have your model in the middle
2) when navigated somewhere show a sphere around the camera with the image + keep some controls (like a "back" button)
You can achieve it like this:
HTML
<a-scene>
<a-entity id="model"></a-entity>
<a-entity id="button" show="src:myPic.png"></a-entity>
<a-sphere id="photosphere" material="side:back" visible="false"></a-sphere>
</a-scene>
JS
AFRAME.registerComponent("show", {
init: function() {
let sphere = document.querySelector("a-sphere")
this.el.addEventListener("click", (e)=>{
let pos = document.querySelector("[camera]").getAttribute("position")
sphere.setAttribute("position", pos)
sphere.setAttribute("visible", true)
})
}
})
Check it out in my fiddle.
You can hide the model, when the photosphere + UI is seen, the execution is up to you.
I have a html page which is use to display gifs. I want to optimize it by converting those gifs to video. I make them muted , set 'displayinline' and 'autoplay'.
I tested it on an iphone with ios 10 safari;
But it is strange that when the number of videos is large than 16(maybe) , some of them (at a random position) will become an empty square. I set every video with the same 'src' value , not thing changed.
So, I wonder is there a limit of videos in a html page in ios safari?
<html>
<body>
<style>
video{
width:100%;
margin-bottom: 20px;
}
</style>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline autoplay></video>
</p>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline autoplay></video>
</p>
<!--....same video repeat 20 times -->
</body>
</html>
This is very old; however, the short answer is "yes, there is a limit."
It totally depends on some combination of your device, your ios version and magic, but you cannot add more than x videos to a single page in ios. the first x videos will load just fine; subsequent videos added to the page will never get a readyState past 0, and will never load, and will never play. I've seen x as low as 4 elements and as high as 16 elements.
I wish I could be more specific with you about the number of video elements, or even the why (we can assume why but there is no official answer).
Playing videos is a CPU intensive task, and also will use memory, as Mohammad notes, and network bandwidth.
Many devices will have hardware support for video playback to help speed it up and reduce processing and battery usage. However, this will generally not be designed to support many videos playing at the same time.
Most devices will demonstrate some issues with the type of test page you are describing - the symptoms may be different on different browsers and different machines, but pretty much all are going to struggle to play this many videos simultaneously.
A typical approach to this type of page, although it may not meet your needs, is to have thumbnails for all the videos and to start playing them when one is selected or hovered over.
Using the Ti.Media.VideoPlayer object. Playing a simple, short .mp4 file, file size is 10.8MB, aspect is not being adjusted or modified, playing at 768x1024 (landscape orientation).
Building on SDK 2.1.4GA against iOS 5 for AdHoc Distribution.
Code itself is below:
var videoPlayer = Titanium.Media.createVideoPlayer({
top: 0,
autoplay: true,
backgroundColor: 'white',
height: 768,
width: 1024,
mediaControlStyle: Ti.Media.VIDEO_CONTROL_NONE,
repeatMode: Ti.Media.VIDEO_REPEAT_MODE_ONE
});
videoPlayer.url = '/app/assets/myVideo.mp4';
Anyone else had similar issues?
So I found the issue, and it has nothing to do with the code, the module, or the implementation. It was actually the video itself. So anyone who runs across this, a video frame rate of 30fps will not work as far as I know. Backing it off to 29.97fps worked perfectly, and exactly with the type of performance and playback expected.
add following parameter while creating your VideoPlayer -
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FIT
If you look here you will see some YouTube videos. I set the zoom on them to .9. I would like to have the zoom be around .3 but many YouTube videos will not play when the zoom is that small. Is there any way to achieve the effect and still have the video play?
The YouTube player has a minimum embed size of 200px by 200px. You can read the YouTube api blog for more details.
http://apiblog.youtube.com/2012/03/minimum-embeds-200px-x-200px.html
I have embedded the youtube image from youtube server which is "http://img.youtube.com/vi/0.jpg", now there is no play button shows up on middle of the image as we see usually any youtube videos!
I tried to use the following code to get an image on top of the youtube image but it shows bigger picture, i know why
<a class="fancybox" href="#video">
<img src="/wp-content/themes/mytheme/images/play_button.png" no-repeat width: 0px height:0px; style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) transparent" width="180" height="150"/>
<div id ="video">
// here is my embedded youtube usual code
</div>
both images shown in 180 x 150 size, but thats not what i want.
I want youtube image will be shown in 180 x 150 size and play button image (play_button.png) will be display in middle of the youtube image in small size.
Any clue in css or coding in php will be great favour.
I sorted out quite easily. Just create an image with play button middle and make the surround transparent and then I put this image on top of the youtube thumbnail image. it worked, but video image gets realigned, but it does not look bad though.
<a class="fancybox" href="#bizgenevideo">
<img src="/wp-content/themes/mytheme/images/play-button.png" style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) " width="180" height="148"/>
You can also use a web service
the halgatewood service was taken down, guess too many people bombarded him :)
now it is on github
https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/
https://github.com/halgatewood/youtube-thumbnail-enhancer
Here is another service that does the same thing (as suggested by muktesh patel):
http://www.giikers.com/iwc
old answer:
http://halgatewood.com/youtube/
Like this:
http://halgatewood.com/youtube/i/youtube_id.jpg
For example:
http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg
Related question: How to overlay a play button over a YouTube thumbnail image