I am building an ionic/cordova application where I want to play video from Youtube live video. I am using YouTube API.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>
<div id="player"></div>
<script src="youtube.js"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '200',
videoId: '0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
}
}
</script>
<div id='elementtoScrollToID' class='my_div'>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
</body>
</html>
Using this code i have created an iPhone application using cordova.
Now when I click on youtube video its playing the video with the default player i.e. quicktime player. Its not running the video within the UIWebview frame itself(Inside my Div). But I want to show the video in the 1st half of the screen i.e my UIWebview frame. Is that possible?
In my App is shows like,
when clicking on red play button I can see the video in full screen in quicktime player like this:
But I want to show the video within the same webView frame not via quick time player. It should play like this:
Is there any other way to achieve the same? Any help will be appreciated. Thanks in advance.
In Android its working perfectly.. :-)
Related
I've done some serious internet searching to find a popup gallery plugin for Vue 3 which supports both images and video files. Most of the plugins are written for Vue 2.
Anybody can recommend a good plugin? (something like fancybox/lightbox)
I've managed to solve this with fancyapps. Since it is written in vanilla JS, I could include it in my Vue file easily. The only difference is you don't need to register it as a component.
P.S. In order to use fancyapps on page load, you will need to add the code for initialization in the activated() lifecycle hook.
FancyboxItem.vue
First import the fancybox:
import {Fancybox} from "/#fancyapps/ui/src/Fancybox/Fancybox";
Also, css is required:
<style lang="scss" scoped>
#import "#fancyapps/ui/dist/fancybox.css";
</style>
Then in my template I've added a button with a click event.
<template>
<button id="play-button" #click="startFancy()"></button>
</template>
And in the methods, I've created a function that starts the fancybox:
methods: {
startFancy: {
var gallery = this.imgs; //your object with images
Fancybox.show(gallery, {}); //starts fancybox with the gallery object
}
}
In composition API steps are really simple.
1.
<script setup>
import { Fancybox } from "#fancyapps/ui/src/Fancybox/Fancybox.js"
// Don't forget to include keys as src in you gallery since Fancybox only accepts that.
const gallery = [
{
src: "https://picsum.photos/785/501"
},
{
src: "https://picsum.photos/785/502"
},
{
src: "https://picsum.photos/785/503"
},
{
src: "https://picsum.photos/785/504"
},
{
src: "https://picsum.photos/785/505"
},
{
src: "https://picsum.photos/785/506"
},
];
const startFancy = () => Fancybox.show(gallery, {});
</script>
2.
<style lang="scss">
#import "#fancyapps/ui/dist/fancybox.css";
</style>
3.
<div v-for="item in gallery" :key="item">
<img :src="item.src" #click="startFancy" />
</div>
I have an instance of a Mapbox GL map, after load of my data source I am calling fitBounds() to change the map's center and zoom to fit my data set. I've also attached a number of event listeners to this map because I want to know when the user manually changed the map's zoom or position.
Mapbox also triggers 'movestart' and 'zoomstart' on fitBounds(), though I'm getting around that problem by checking for the presence of the originalEvent property in the event callback.
The problem is, I also have a NavigationControl added to the map, and user interactions triggered through its zoom or rotate buttons fire my map events without the originalEvent property. I cannot find any way in the Mapbox documentation to listen attach event listeners to the NavigationControl, nor a way to differentiate between a zoom / pan initiated by a fitBounds call vs. a user interaction through that component.
Is there something I'm missing? Is there a way to attach mouse / touch event listeners to the NavigationControl component? Or perhaps is there some property within the event objects that will tell me the source of the event?
Simplified code sample -
this._userMoved = false;
this._map = new mapboxgl.Map(options);
// listen for user actions that update the map display
['movestart', 'zoomstart', 'boxzoomstart', 'rotatestart', 'pitchstart'].forEach((action) => {
this._map.on(action, (e) => {
if (e.originalEvent) {
// if this property is set, the event in question was triggered by an actual user ineraction.
// EXCEPT when the user interaction came from the NavigationControl, hence the problem
this._userMoved = true;
}
});
});
this._map.on('load', () => {
// add the control after map load
this._map.addControl(new mapboxgl.NavigationControl(),'top-left');
this._setMapData(); // adds my data source to the map
this._setMapView(); // calls this._map.fitBounds() using my data source
});
If your need is specifically to handle a specific event (fitbounds) that is being called once, then you can do this:
this._map.once('moveend', e => {
// do whatever you do after the fitbounds event.
this._map.on(['movestart', 'zoomstart', 'boxzoomstart', 'rotatestart', 'pitchstart'], userMovementHandler)
});
EDIT
I just looked more closely at the documentation and there is indeed an eventData parameter to fitBounds which is intended to solve exactly this problem.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RldmFnZSIsImEiOiJGcW03aExzIn0.QUkUmTGIO3gGt83HiRIjQw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
}).on('moveend', e => {
if (e.source === 'fitBounds') {
console.log('Caused by fitBounds');
} else {
console.log('Caused by user');
}
})
map.fitBounds([140,-42, 150,-37], {}, {source: 'fitBounds'})
</script>
</body>
</html>
I've followed this tutorial:
http://popcornjs.org/popcorn-101
Tutorial Code
<!doctype html>
<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#ourvideo");
// add a footnote at 2 seconds, and remove it at 6 seconds
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
pop.play();
}, false);
</script>
</head>
<body>
<video height="180" width="300" id="ourvideo" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnotediv"></div>
</body>
</html>
And can run this locally.
In Firebug, I see the footnote div update from:
<div style="display: none;">Pop!</div>
to:
<div style="display: inline;">Pop!</div>
On a live site however, I am loading my page html from a MongoDB database via Ajax and the footnote display functionality doesn't seem to be working.
Thinking this might have something to do with needing to 're-initialise' after the content has loaded, I've added the popcorn.js functionality to a function called on click:
Function
<script>
function myPopcornFunction() {
var pop = Popcorn("#ourvideo");
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
pop.play();
}
</script>
Call
$(document).on("click","a.video", function (e) {
// passing values to python script and returning results from database via getJSON()
myPopcornFunction();
});
This doesn't seem to have an effect.
No footnotediv content is loaded when the video plays.
The video is also not playing automatically.
It's hard to reproduce in jsFiddle with dynamic content, so is there a generic approach to ensuring popcorn works with dynamically loaded content?
Firebug Error on click
TypeError: k.media.addEventListener is not a function
It seems to have been a timing issue in that originally I had made a call to the myPopcornFunction() outside of the function which loaded the content (a getJSON() function). When I placed the call within the same block as the getJSON() function, things seemed to maintain their 'order' and popcorn could work correctly.
Before
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
});
e.preventDefault();
myPopcornFunction(); // the call WAS here
});
After
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
myPopcornFunction(); // the call is now HERE
});
e.preventDefault();
});
The myPopcornFunction() was the same as in the original post.
I found this script online that add a pin it button to fancybox v2. Here is the working example:
http://scottgale.com/blogsamples/fancybox-pinterest/index.html
Im working on a site on the Hubspot CMS. For those who are familiar, Fancybox 1.3.4 comes included with Hubspot. And you really don't get editing access to any of the files or scripts associated with it.
The Fancybox works as a gallery module (or widget) so users can just upload images.
I was wondering if there is a way to modify this original script to work with how fancybox 1 is implemented on my site.
Here is my page:
http://www.signdealz.com/gallery-test/
Here is the script:
<script type="text/javascript">
//NOTE: this uses fancybox 2
$(document).ready(function() {
$('.fancybox').fancybox({
//set the next and previous effects so that they make sense
//the elastic method is confusing to the user
nextEffect: 'fade',
prevEffect: 'fade',
//set the position of the title
helpers : {
title: {
// title position options:
// 'float', 'inside', 'outside' or 'over'
type: 'inside'
}
},
beforeShow: function () {
//if you already have titles
//on your fancybox you can append
if(this.title) {
//set description to current title
//this will set what posts
var description = this.title;
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
//put the path to the image you want to share here
encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
'&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'
//add title information
+'<span>'+this.title+'</span>';
//if you don't already have titles
//you can just make the title the pinterest button
} else {
//add pinterest button for title
this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
encodeURIComponent(this.href)+
'&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
}
}
});
});
</script>
Any help is greatly appreciated!
This is an example of how to add the Pinterest button to your fancybox's (v1.3.4) title using the options titlePosition and titleFormat. If your anchor has a title then it will be displayed along the button, otherwise the button will be displayed alone.
This script is based on the script your found for v2.x but tweaking to options for v1.3.4.
$(".fancybox").fancybox({
"titlePosition": "inside",
"titleFormat": function () {
return this.title ?
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
'&description='+this.title+'" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'+
'<span>'+this.title+'</span></div>'
:
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
encodeURIComponent(this.href)+
'&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>'+
'<span> </span></div>'
}
});
See JSFIDDLE
NOTE : this is for fancybox v1.3.4
EDIT (Jan 30, 2014) :
New JSFIDDLE using CDN for fancybox files to avoid possible 403 forbidden errors while serving the files from fancybox.net server.
I'm new to mediaelements.js
at the end of my video, I wish that the user is redirected to another page
I have tried something like
<script>
$(function(){
$('audio,video').mediaelementplayer({
success: function(player, node) {
window.location = "http://google.com";
});
}
});
});
</script>
but I have not been successfull at all, maybe someone would have an idea
This worked for me. 'player1' is the id of the video
<script>
new MediaElement('player1', {
success: function (mediaElement, domObject) {
// add event listener
mediaElement.addEventListener('ended', function(e) {
//Do Stuff here
//alert("sometext");
window.location = "http://google.com";
}, false);
},
});
</script>
The code I posted was for the media element player. I looks like you're using the video.js player in the link you posted. I'm not sure how that would work but I did find this... help.videojs.com/discussions/questions/26-redirect-to-url-once-video-has-ended