I embed youtube video in my website like this:
<iframe width="320" height="180" src="http://www.youtube.com/embed/12345678"
style="border: none" allowfullscreen id="myVideo"></iframe>
This iframe's href downloads a this which is 2.7 KB
That download these:
287 KB http://s.ytimg.com/yts/swfbin/watch_as3-vf123456.swf
40.4 KB http://s.ytimg.com/yts/jsbin/www-embed-vf123456.js
26.7 KB http://s.ytimg.com/yts/cssbin/www-embed-webp-vf123456.css
0.5 KB http://i3.ytimg.com/crossdomain.xml
So even though the user didn't watch video yet, he downloads nearly 356 KB data. What would be a better way to show Youtube video in my website but load these data when user wants to watch video ?
You can use the thumbnails and only load the player when the user clicks the thumbnail
You can see an example of how to do this using AngularJS on the Topic Explorer example
App:
https://yt-topic-explorer.googlecode.com/git/dist/index.html
View:
https://code.google.com/p/yt-topic-explorer/source/browse/app/views/main.html
Code snippet:
<div class="player-container">
<img ng-click="videoClicked($event.target, videoResult.id)" ng-src="{{videoResult.thumbnailUrl}}" class="thumbnail-image">
<div class="title"><a ng-href="{{videoResult.href}}" target="_blank">{{videoResult.title}}</a></div>
</div>
Controller:
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js
Code snippet:
function playVideo(container, videoId) {
var width = container.offsetWidth;
var height = container.offsetHeight;
new YT.Player(container, {
videoId: videoId,
width: width,
height: height,
playerVars: {
autoplay: 1,
controls: 2,
modestbranding: 1,
rel: 0,
showInfo: 0
}
});
Related
When we use LoadingController in Ionic 3, it takes the fullscreen control.
Is it possible to create loading screen just for an HTML element?
For Example I have 4 cards displayed in a page and each of them will show the loading until the data is loaded. In the mean time, rest of the elements should be available to the user.
I have tried to implement it but can not find help from Ionic 3 Doc
I have tried custom loading with the following code but it did not work. It still takes the full screen.
TS page:
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>`,
duration: 5000
});
loading.onDidDismiss(() => {
console.log('Dismissed loading');
});
loading.present();
}
HTML page:
<div class="custom-spinner-container">
<div class="custom-spinner-box"> My content here...</div>
</div>
I have been trying combinations of all I could think of and I also found nothing from searching, but what I'm trying to do is load a JSON object from my server and then use that to render a panel with a video, info, etc.
But I can't get anything to work though, what am I doing wrong here?
{
xtype: 'panel',
navigationBar: {hidden: true},
title: 'Video feed',
html: '<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>',
store: {
autoLoad: true,
fields: ['video'],
proxy: { type: 'jsonp', url: 'http://patrick.includu.com/app/appvideos/getVideoPage/234', reader: { type: 'json' } }
}
}
First of all, note that your JSON returning from your proxy is invalid. You can validate it here.
To render a view from your JSON take a look at Sencha's Dataview. Here you use an itemTpl to render your video, info etc. So, in your case something like this:
itemTpl: '<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>'
I hope this helps you further!
If your store is going to have more than one record of videos and you want to display all of them, then try removing html: and adding:
tpl: '<tpl for=".">' +
'<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>' +
'</tpl>'
If you are just showing one video at a time just do: (still removing html: though)
tpl: '<video width="320" height="240" controls="controls"><source src="{video.url}" type="video/mp4"></video>'
Another gotcha: If a html tag is specified, even as html: '' it will always override the tpl specified.
I have vide an iframe with video that needs to be played in fancybox.
Here is the code:
<a id="playLink" href="#pageVideo">Link for video </a>
<div style="display:none">
<div id="pageVideo">
<iframe src="someVideo.mp4?autoplay=true" style="overflow:auto" frameborder="0" height="400" width="650"></iframe></div>
</div>
$('#homePlayLink').fancybox({
'padding' : 0,
'width' : 560,
'height' : 400
});
The problem is that in Chrome video starts to play on page load. Because it is in display none div I do not see it but I hear the audio. How to fix this, so the video plays only in fancy box After click on the link?
Thanks.
Your iframe src has the autoplay = true parameter; this is why it will auto play when the page loads.
How about pointing the iframe src to a blank page and then override the href when the fancybox opens?
$("#tip4").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
Take a look at http://fancybox.net/blog section 4: Show youtube clips.
I am using this code
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block';
this.style.display='none'">
<img src="../img/film.jpg" style="cursor:pointer" />
</div>
<div id="thevideo" style="display:none">
<iframe width="600"
height="335"
src="https://www.youtube.com/embed/MZ-NmMMTyTU?&rel=0&theme=light&showinfo=0&disablekb=1&hd=1&autohide=1&color=white&autoplay=1"
frameborder="0"
allowfullscreen>
</iframe></div>
</div>
To embed a YouTube video on my site, and it is working fine in Firefox. But in Chrome the video starts playing, behind the image i have placed on top.
Any ideas how to fix this?
I just made one YouTube handler, with Javascript API.
HTML code:
<b id="youbox" class="youbox youbox-left">
<div id="player"></div> <!--player will loads here-->
</b>
<div id="youtube-select" class="youtube-select clearfix">
<ul>
<!-- use this part as a dynamic block, so you can multiply this -->
<li class="playanothervideo {ACTIVE}" rel="{YOUTUBE VIDEO ID}">
<h1>{TITLE OF VIDEO}</h1>
</li>
<!-- end of dynamic block. important: at the dom ready you have to make one li active, because that will be the first loaded video -->
</ul>
</div>
The javascript
if (($("#youbox").size() > 0)) // if you have youbox, which means you want a youtube player
{
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player; // insert youtube player api to the html source, and make a player instance
function onYouTubePlayerAPIReady() // on youtube player api loaded
{
player = new YT.Player('player', {
height: '350', // height of player
playerVars: { 'color': 'white', 'theme': 'light', 'modestbranding': 1, 'rel':0, 'showsearch':0, 'showinfo': 0, 'iv_load_policy': 3, 'hd': 1, 'controls':1}, // personalize players lookout (this is white instead of red)
width: '629', // width of player
videoId: $("#youtube-select li.active").attr("rel"), // aye, this is the first video id's getter
events:
{
'onReady': onPlayerReady, // the easiest event handling, calls onplayerready fn
}
});
}
function playAnotherVideo(id) // play another video event handler
{
if (player.getPlayerState() == 1) // if video is playing
{
console.log("playerstate ok")
player.stopVideo(); // stops video
player.loadVideoById(id); // load other
player.playVideo(); // starts other
}
else
{
player.cueVideoById(id); // if not playing just loads the other video's thumbnail
}
}
function onPlayerReady(event)
{
event.target.setPlaybackQuality("hd720"); // setting 720p resolution by default (it's not tested yet, sorry)
}
}
and from an other js, but can apply to the first:
$(".playanothervideo").live("click", function(){
playAnotherVideo($(this).attr("rel"));
pickMe($(this), "active");
});
function pickMe(e, c) {
e.siblings(e[0].tagName).removeClass(c);
e.addClass(c);
}
which select the videos and handle their active class.
Good luck with Youtubein. :)
For more informations check: https://developers.google.com/youtube/js_api_reference
I'm working to get a video on my webpage with the video tag.
I'm using FlareVideo to create my video tag. I can get the video to work on every browser that I need (IE 7/8/9, Firefox, Chrome, Safari).
The thing is, when I set the width and heigt, it looks like Safari and Chrome do not care at all and just put the right width, but a way too high height.
Also, with IE 7 and 8, the flash player used when HTML5 video is not supported by the browser is too small.
Hope somebody can help
Thanks
EDIT: added code
The HTML code
<div id="flarevideo" class="video-player" style="display:none;"></div>
The javascript code
function vidSwap(vidURL, awidth, aheight) {
var pwidth = 720;
var pheight = 406;
$("div.video-player").show();
fv = $("#flarevideo").flareVideo({
flashSrc: window.pathToFlashVideo,
width: pwidth,
height: pheight,
autobuffer: false,
preload: false
});
fv.load([
{
src: '[server address]' + vidURL +'.mp4',
type: 'video/mp4'
},
{
src: '{server address]' + vidURL + '.ogv',
type: 'video/ogg; codecs="theora, vorbis"'
}
]);
}
Note that the javascript is a bit different that what it should be (width and heigth here are hardcoded instead of using the two parameters of my function).
Also, the format of vidUrl is "/[name fo the video without extension"]
And, window.pathToFlashVideo is the path for the flash fallback, defined on my html page
Seems like the problem was coming from the div's CSS that contained the video. I removed the height:100% and now it's working fine.
Hope this helps anybody else with the same problem