Hi there I am trying to have a video autoplay and mute. But on mobile devices it doesn't show due to flash.
here is my code.
<div id="vimeo"> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function vimeo_player_loaded() {
moogaloop3 = document.getElementById('vimeo');
moogaloop3.api_setVolume(0);
}
var flashvars = {
'clip_id': '138036294', // <--vimeo video ID
'server': 'vimeo.com',
'show_title': 0,
'show_byline': 0,
'show_portrait': 0,
'fullscreen': 0,
'autoplay': 1,
'js_api': 1,
'js_onload': 'vimeo_player_loaded'
}
var parObj = {
'swliveconnect':true,
'fullscreen': 1,
'allowscriptaccess': 'always',
'allowfullscreen':true
};
var attObj = {}
attObj.id="vimeo";
swfobject.embedSWF("http://www.vimeo.com/moogaloop.swf", "vimeo", "343", "193", "9.0.28", '',flashvars,parObj, attObj );
</script>
How would I go about making it default to html5?
Found another way of doing it using
<div id="vimeo"> <div>
<script>
// URL of the video
var videoUrl = 'http://www.vimeo.com/76979871';
var endpoint = 'http://www.vimeo.com/api/oembed.json';
var callback = 'embedVideo';
var url = endpoint + '?url=' + encodeURIComponent(videoUrl)+ '&autoplay=true' + '&callback=' + callback + '&width=420';
function embedVideo(video) {
document.getElementById('vimeo').innerHTML = unescape(video.html);
}
function init() {
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(js);
}
window.onload = init;
Related
I am triying to create mathjax output to png file
I have created a JSFiddle here
I used code like below, I have an html code like
function myFunction(eqn){
window.MathJax = {
jax: ["input/TeX", "output/SVG"],
extensions: ["tex2jax.js", "MathMenu.js", "MathZoom.js"],
showMathMenu: false,
showProcessingMessages: false,
messageStyle: "none",
SVG: {
useGlobalCache: false
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("End", function() {
var mj2img = function(texstring, callback) {
var input = texstring;
var wrapper = document.createElement("div");
wrapper.innerHTML = input;
var output = { svg: "", img: ""};
MathJax.Hub.Queue(["Typeset", MathJax.Hub, wrapper]);
MathJax.Hub.Queue(function() {
var mjOut = wrapper.getElementsByTagName("svg")[0];
mjOut.setAttribute("xmlns", "http://www.w3.org/2000/svg");
// thanks, https://spin.atomicobject.com/2014/01/21/convert-svg-to-png/
output.svg = mjOut.outerHTML;
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(output.svg)));
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
output.img = canvas.toDataURL('image/png');
callback(output);
};
});
}
mj2img(eqn, function(output){
const t = document.getElementById("target"); const i = document.createElement('img'); i.src = output.img; t.append(i);
});
});
}
};
}
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function() {
// remote script has loaded
};
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
<textarea onkeyup="myFunction(this.value)"></textarea>
<div id="target"></div>
How to display image when keyup a form containing textarea?
Here is a working version of above code by giving direct value.
standard pattern for keyup Event listener
document.getElementById("target").onkeyup = function() {funName()};
According to your specific problem. I'm not pretty sure where do you want to apply it
I need to stream video from my webcam to all user that enter my webpage.
If i currently go to my page i can see myself at the webcam, but I want that every user that browse to my page will see my broadcast live.
I am new to angular, what am I missing here? How can I broadcast to all users that entering my page?
I have this html code:
<body>
<div ng-app="myapp" ng-controller="mainController">
<webcam channel="channel"
on-streaming="onSuccess()"
on-error="onError(err)"
on-stream="onStream(stream)">
</webcam>
<button ng-click="makeSnapshot()">take picture</button>
<canvas id="snapshot" width="300" height="300"></canvas>
</div>
<div class="webcam" ng-transclude></div>
<div id="stream" ></div>
</body>
And my module code:
var webcam = angular.module('myapp', ['webcam'])
.controller('mainController', function ($scope) {
var _video = null,
patData = null;
$scope.patOpts = { x: 0, y: 0, w: 25, h: 25 };
$scope.channel = {};
$scope.webcamError = false;
$scope.onError = function (err) {
};
$scope.onSuccess = function () {
_video = $scope.channel.video;
$scope.$apply(function () {
$scope.patOpts.w = _video.width;
$scope.patOpts.h = _video.height;
$scope.showDemos = true;
});
};
$scope.onStream = function (stream) {
//i think it is here i need to add some code for streaming
};
$scope.makeSnapshot = function () {
};
$scope.downloadSnapshot = function downloadSnapshot(dataURL) {
window.location.href = dataURL;
};
var getVideoData = function getVideoData(x, y, w, h) {
};
var sendSnapshotToServer = function sendSnapshotToServer(imgBase64) {
$scope.snapshotData = imgBase64;
};
});
I'm trying to load pdfs and render every single page into a canvas.
It works when I'm only loading a one paged .pdf but not when I'm using a multiple page .pdf
The for-loop is supposed to run as often as there are pages in the pdf,
var total =
Every loop I'm creating a
<canvas class=''></canvas>
which should have the matching page number as class.
can.className = 'pdfpage' + i
But for some reason it always gets the total page count as class. E.g. when loading a five paged .pdf it creates...
<canvas class='pdfpage5'></canvas>
...5 times and not 'pdfpage0', 'pdfpage1', etc.
I'm pretty new to JS so I'm not exactly sure if I'm thinking in the right direction with 'i'. I added
console.log('i is: ' + i);
to confirm that i really adds +1 every turn.
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript" src='./jsPDF/jspdf.js'></script>
<script src="./jsPDF/plugins/addimage.js"></script>
<script src="./jsPDF/plugins/png_support.js"></script>
<script src="./jsPDF/plugins/canvas.js"></script>
<script type="text/javascript" src='./FileSaver.js-master/FileSaver.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<div id='1'>
<input id='pdf' type='file'/>
<script type="text/javascript">
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
if (file = document.getElementById('pdf').files[0]) {
fileReader = new FileReader();
fileReader.onload = function(ev) {
console.log(ev);
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
var total = pdf.numPages;
for (var i = 0; i < total; i++) {
console.log('i is: ' + i);
console.log('total pages: ' + total);
//
// Fetch the first page
//
console.log(pdf)
pdf.getPage(i + 1).then(function getPageHelloWorld(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var div = document.getElementById('1');
var can = document.createElement('canvas');
can.className = 'pdfpage' +i;
div.appendChild(can);
canvas = document.getElementsByClassName('pdfpage' +i);
var context = canvas[0].getContext('2d');
canvas[0].height = viewport.height;
canvas[0].width = viewport.width;
//
// Render PDF page into canvas context
//
var task = page.render({canvasContext: context, viewport: viewport})
task.promise.then(function(){
console.log(canvas[0].toDataURL('image/jpeg'));
var dataURL = canvas[0].toDataURL('image/jpeg');
});
});
}
}, function(error){
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
</script>
</div>
Try this, it should add the required the classnames
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript" src='./jsPDF/jspdf.js'></script>
<script src="./jsPDF/plugins/addimage.js"></script>
<script src="./jsPDF/plugins/png_support.js"></script>
<script src="./jsPDF/plugins/canvas.js"></script>
<script type="text/javascript" src='./FileSaver.js-master/FileSaver.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<div id='1'>
<input id='pdf' type='file'/>
<script type="text/javascript">
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
if (file = document.getElementById('pdf').files[0]) {
fileReader = new FileReader();
fileReader.onload = function(ev) {
console.log(ev);
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
var total = pdf.numPages;
for (var i = 0; i < total; i++) {
console.log('i is: ' + i);
console.log('total pages: ' + total);
//
// Fetch the first page
//
console.log(pdf)
pdf.getPage(i + 1).then(function getPageHelloWorld(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var div = document.getElementById('1');
var can = document.createElement('canvas');
can.className = 'pdfpage' +(page.pageIndex + 1);
div.appendChild(can);
canvas = document.getElementsByClassName('pdfpage' +(page.pageIndex + 1));
var context = canvas[0].getContext('2d');
canvas[0].height = viewport.height;
canvas[0].width = viewport.width;
//
// Render PDF page into canvas context
//
var task = page.render({canvasContext: context, viewport: viewport})
task.promise.then(function(){
console.log(canvas[0].toDataURL('image/jpeg'));
var dataURL = canvas[0].toDataURL('image/jpeg');
});
});
}
}, function(error){
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
</script>
</div>
Basically, all I have done is replace i with page.pageIndex +1 in the callback function
I am making a node app that is in it current state very simple, but I get an issue I can't figure out.
The generated html of my express app looks like this:
<html style="" class=" js no-touch svg inlinesvg svgclippaths no-ie8compat">
<head>
...
<script type="text/javascript" src="/javascripts/mouse.js"></script>
...
</head>
<body class="antialiased" style=""><div class="row"><div class="row">
<script>
var mouse;
var X = 0;
var Y = 0;
window.onload = function()
{
alert(Mouse());//=> undefined
mouse = Mouse();
mouse.setMouseMoveCallback(function(e){ //THIS LINE FAILS: "Cannot call method 'setMouseMoveCallback' of undefined"
X = e.x;
Y = e.y;
alert("move");
});
}
...
</html>
The include script tag in the header adds this javascript file:
function Mouse(onObject){
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
mouseDownCount = 0;
var mouseDownCallbacks = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var mouseTracer = 0;
var tracePosArray;
var target = onObject;
if(!onObject){
onObject = document;
}
onObject.onmousedown = function(evt) {
mouseDown[evt.button] = 1;
mouseDownCount--;
if(mouseDownCallbacks[evt.button] != 0){
mouseDownCallbacks[evt.button](evt);
}
}
onObject.onmouseup = function(evt) {
mouseDown[evt.button] = 0;
mouseDownCount--;
}
var mousemoveCallback;
onObject.onmousemove = function(evt){
//Tracing mouse here:
if(mouseTracer){
tracePosArray.push([evt.pageX,evt.pageY]);
}
if(mousemoveCallback){
mousemoveCallback(evt);
}
}
var mouseWheelCallback;
onObject.onmousewheel = function(evt){
if(mouseWheelCallback){
mouseWheelCallback(evt);
}
}
var mouseOverCallback;
onObject.onmouseover = function(evt){
if(mouseOverCallback){
mouseOverCallback(evt);
}
}
var mouseOutCallback;
onObject.onmouseout = function(evt){
if(mouseOutCallback){
mouseOutCallback(evt);
}
}
//TODO: There is a bug when you move the mouse out while you are pressing a button. The key is still counted as "pressed" even though you release it outside of the intended area
//NOTE: might have fixed the bug. Do some further investigation by making a smaller element.
this.anyDown = function(){
if(mouseDownCount){
for(p in mouseDown){
if(mouseDown[p]){
return true;
}
}
}
}
this.setLeftDownCallbackFunction = function(fun){
mouseDownCallbacks[0] = fun;
}
this.setRightDownCallbackFunction = function(fun){
mouseDownCallbacks[2] = fun;
}
this.setMiddleDownCallbackFunction = function(fun){
mouseDownCallbacks[4] = fun;
}
this.setSpcifiedDownCallbackFunction = function(num, fun){
mouseDownCallbacks[num] = fun;
}
this.leftDown = function(){
if(mouseDownCount){
return mouseDown[0] != 0;
}
}
this.rightDown = function(){
if(mouseDownCount){
return mouseDown[2] != 0;
}
}
this.middleDown = function(){
if(mouseDownCount){
return mouseDown[4] != 0;
}
}
this.setMouseMoveCallback = function (callback){
mousemoveCallback = callback;
}
this.setMouseWheelCallback = function (callback){
mouseWheelCallback = callback;
}
this.setMouseOverCallback = function (callback){
mouseOverCallback = callback;
}
this.setMouseOutCallback = function (callback){
mouseOutCallback = callback;
}
this.enableTracer = function(){
tracePosArray = new Array();
mouseTracer = 1;
}
this.getMouseTracerData = function() {
return tracePosArray;
}
}
So: I have assured that the JS file is loaded. But none the less I am not able to access the Mouse() method in my window.onload function in the body, it shows up as undefined. This is very strange to me because if I create a HTML file that does exactly the same thing I am able to access it.
What is going on here? Is there some magic trickery in node.js / express that disables this kind of interaction?
Additional notes:
I am using Jade as the template engine.
The "mouse.js" file works. I have used it several times before.
I am using socket.io for communication between the client and server.
Complete header:
<head><title>My awesome title</title><link rel="stylesheet" href="/stylesheets/foundation.min.css"><link rel="stylesheet" href="/stylesheets/normalize.css"><link rel="stylesheet" href="/stylesheets/style.css"><script type="text/javascript" src="/socket.io/socket.io.js"></script><style type="text/css"></style><script type="text/javascript" src="/javascripts/jquery.min.js"></script><script type="text/javascript" src="/javascripts/vendor/custom.modernizr.js"></script><script type="text/javascript" src="/javascripts/vendor/zepto.js"></script><script type="text/javascript" src="/javascripts/mouse.js"></script><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta name="viewport" content="width=device-width"></head>
That would throw an error if the Mouse function is undefined. The reason alert shows 'undefined' is that the Mouse function doesn't return anything, hence undefined. It should be used as a constructor, as in 'new Mouse()'
I'm working on building a custom YouTube player to embed a video feed on a website. I'm new to this, and I haven't had much luck searching around the Web.
Using snippets of useful code from tutorials, I've created a main video player and a carousel of thumbnails for users to click on to load that video into the player. The only thing missing, however, is I want the currently selected video's title to appear below the iframe tag. Any help on this? Or can anybody point me in the right direction?
Here's my script:
<script>
(function() {
function createPlayer(jqe, video, options) {
var ifr = $('iframe', jqe);
if (ifr.length === 0) {
ifr = $('<iframe scrolling="no">');
ifr.addClass('player');
}
var src = 'http://www.youtube.com/embed/' + video.id;
if (options.playopts) {
src += '?';
for (var k in options.playopts) {
src+= k + '=' + options.playopts[k] + '&';
}
src += '_a=b';
}
ifr.attr('src', src);
jqe.append(ifr);
}
function createCarousel(jqe, videos, options) {
var car = $('div.carousel', jqe);
if (car.length === 0) {
car = $('<div>');
car.addClass('carousel');
jqe.append(car);
}
$.each(videos, function(i,video) {
options.thumbnail(car, video, options);
});
}
function createThumbnail(jqe, video, options) {
var imgurl = video.thumbnails[0].url;
var img = $('img[src="' + imgurl + '"]');
if (img.length !== 0) return;
img = $('<img>');
img.addClass('thumbnail');
jqe.append(img);
img.attr('src', imgurl);
img.attr('title', video.title);
img.click(function() {
options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}}));
});
}
var defoptions = {
autoplay: false,
user: null,
player: createPlayer,
carousel: createCarousel,
thumbnail: createThumbnail,
loaded: function() {},
playopts: {
autoplay: 0,
egm: 1,
autohide: 1,
fs: 1,
showinfo: 0
}
};
$.fn.extend({
youTubeChannel: function(options) {
var md = $(this);
md.addClass('youtube');
var allopts = $.extend(true, {}, defoptions, options);
allopts.maindiv = md;
$.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
var feed = data.feed;
var videos = [];
$.each(feed.entry, function(i, entry) {
var video = {
title: entry.title.$t,
id: entry.id.$t.match('[^/]*$'),
thumbnails: entry.media$group.media$thumbnail
};
videos.push(video);
});
allopts.allvideos = videos;
allopts.carousel(md, videos, allopts);
allopts.player(md, videos[0], allopts);
allopts.loaded(videos, allopts);
});
}
});
})();
$(function() {
$('#player').youTubeChannel({user:'oklahomadaily'});
});
</script>
And here's my HTML:
<div class="video">
<div class="boxTitle">Featured videos</div>
<div id="player"></div>
<div id="title"><p class="multimedia">Could not find a description...</p></div>
</div>
Thanks for your patience and assistance.