As to the progress bar videojs player to make draggable slider? like here http://take.ms/2m2cW
var down = false;
me.controlBar.progressControl.on('mousedown', function() { down = true; });
me.controlBar.progressControl.on('mouseup', function() { down = false; });
me.controlBar.progressControl.on('mousemove', function(e) {
if(down) {
console.log(this.seekBar.update());
}
});
Related
I need to stop the video when the slide is changed. The current code reacts to changing the variable, but does not stop the video. I use Clappr ^0.3.3, Vue-cli ^3.5.0 and Swiper ^4.5.0.
I change the boolean value to use it for the trigger in the player:
data: () => ({
slider_is_move: false,
}),
After request:
.then(() => {
// init slider
new Swiper('.content__slider', {
// Note: I removed extra options
on: {
slideChange: function () {
this.slider_is_move = true; // if slide is change
setTimeout(() => {
this.slider_is_move = false; // set the previous value
}, 1500);
}
}
});
// init clappr (video player)
if ( document.querySelector('.content-video') ) {
for (let i = 0; i < this.project_videos.length; i++) {
new Clappr.Player({
source: '/storage/' + this.project_videos[i],
parentId: '#container_' + (this.project_images.length + i),
mute: true,
width: document.querySelector('.content-item').offsetWidth,
height: document.querySelector('.content-item').offsetHeight,
events: {
onPlay: () => {
setInterval(() => {
if (this.slider_is_move === true) {
this.pause();
}
}, 1000);
}
}
});
}
}
});
If I add a console.log(), the code will work as it should, but it will not stop the video.
onPlay: () => {
setInterval(() => {
if (this.slider_is_move === true) {
this.pause();
}
}, 1000);
}
To make the video stop when you change the slide, you need to add a few lines in the code:
add name to object
let player_video = new Clappr.Player...
and pause it
player_video.pause();
You should watch the data attribute slider_is_move, and react to any changes in the state.
watch: {
slider_is_move: {
handler(nowMoving) {
if (nowMoving) {
this.pause();
}
},
}
}
I'm using Mapbox to drop a marker on a map click. I successfully get the coordinates however I can't bind them to my data...
map.on('click', function(e) {
if (this.marker) { this.marker.remove() }
this.marker = new mapboxgl.Marker()
.setLngLat({ lng: e.lngLat.lng, lat: e.lngLat.lat})
.addTo(map);
map.flyTo({
center: { lng: e.lngLat.lng, lat: e.lngLat.lat },
zoom: 15
});
// This does not bind and update the data
this.latitude = JSON.stringify(e.lngLat.lat)
this.longitude = JSON.stringify(e.lngLat.lng)
})
It's a contextual binding issue. the this here does not refer to your vue instance but the map instead.
// fat arrow solves this
map.on('click', function(e) => {
})
// aliasing solves this
const self = this
map.on('click', function(e) {
})
// binding solves this
map.on('click', function(e) => {
}.bind(this))
I'm trying to make a view like Firebase's console with React and material-ui.
How can I build a Drawer that will automatically close when view(browser) width is decreasing.
Quite easy, you can hook up the listener on resize event on your react class:
var RootPage = React.createClass({
render: function() {
return <Drawer refs={'drawer'} />;
},
// we trigger our drawer here
componentWillUpdate: function(nextProp, nextState) {
if(nextState.width < this.state.width) {
this.refs.drawer.open = false;
}
},
windowOnResize: function() {
var width = $(window).width();
this.setState({ width: width });
},
componentWillMount: function() {
this.windowOnResize();
},
componentDidMount: function() {
window.addEventListener("resize", this.windowOnResize);
},
componentWillUnmount: function() {
window.removeEventListener("resize", this.windowOnResize);
}
});
I'm trying to capture video/photo from webcam. I've foun a script working, but I would like to start the camera access only on button click. With this script it will start immediatly (I don't want to). How can I bind this event on click please?
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
}, false);
You need to call getUserMedia in a click handler instead of during the DOM content loaded event.
I took the code in your question, and modified it:
Made it part of a whole html document so I could test it
Wrapped the code that starts the camera in a function, called startCamera
Added a "start camera" button. You could start the camera with the snap button is clicked, but that didn't really make sense to me.
Added a click listener to the "start camera" button, which simply executes the startCamera function
Here's the code:
<html>
<body>
<canvas id="canvas"></canvas>
<video id="video"></video>
<button id="startCamera">Start camera</button>
<button id="snap">Take snapshot</button>
<script>
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
function startCamera() {
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
// Trigger starting the camera
document.getElementById("startCamera").addEventListener("click", function() {
startCamera();
});
}, false);
</script>
</body>
</html>
Try This code. Also try to run this from a virtual directory.
<html>
<head>
<script type="text/javascript">
function doGetUserMedia() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canv"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
}
</script>
</head>
<body>
<button onclick="doGetUserMedia()">Start Camera</button>
<video id="video" width="487" height="365"></video>
<button id="snap">Take snapshot</button>
<canvas id="canv" width="487" height="365"></canvas>
</body>
</html>
You can try something like that:
<html>
<head>
<script type="text/javascript">
function doGetUserMedia() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
}
</script>
</head>
<body>
<button onclick="doGetUserMedia()">Click me</button>
</body>
</html>
I am fresher in titanium for mac os x.
I am using titanium first time and do not have any knowledge on js pages and action event's
I am setup titanium and add button. On button click i need to navigate to another js page
var btn = Ti.UI.createButton({
left:10,
top:100,
height:'40',
width:'80',
title:'login',
color:'auto'
}
)
self.add(lbl);
btn.addEventListener('click',function() {
}
)
let example consider second js page is login.js page
when i click button i need to login.js page
with navigation effect!
# thanks in advance
Use below code
var btn = Ti.UI.createButton({
left:10,
top:100,
height:'40',
width:'80',
title:'login',
color:'auto'
});
self.add(btn);
btn.addEventListener('click',function() {
var win = Titanium.UI.createWindow({
url:'login.js',
title:'Login'
});
Titanium.UI.currentTab.open(win,{animated:true}); //if you used tabbar in your app
win.open(win,{animated:true}); //if you don't have tabbar in your app
});
Hope this helps you
This code may help you
function ApplicationWindow() {
//declare module dependencies
var All = require('ui/common/All');
Tree = require('ui/common/Tree');
EBOM = require('ui/common/E-BOM');
MBOM = require('ui/common/M-BOM');
SBOM = require('ui/common/S-BOM');
//create object instance
var self = Ti.UI.createWindow({
title:'Products',
exitOnClose:true,
navBarHidden:true,
backgroundColor:'#ffffff',
/////////////////////////////////////////////////////////////////////////////
activity: {
onCreateOptionsMenu: function(e) {
var menu = e.menu;
var menuItem = menu.add({ title: "C-BOM", icon: 'Arrow-Hover.jpg' });
//menuItem.setIcon("Arrow-Hover.jpg");
menuItem.addEventListener("click", function(e) {
var all = new All();
self.add(all);
});
var menuItem = menu.add({ title: "ALL-BOM" });
menuItem.setIcon("images/refresh_icon.png");
menuItem.addEventListener("click", function(e) {
var tree = new Tree();
self.add(tree);
});
var menuItem = menu.add({ title: "E-BOM" });
menuItem.setIcon("images/refresh_icon.png");
menuItem.addEventListener("click", function(e) {
var ebom = new EBOM();
self.add(ebom);
});
var menuItem = menu.add({ title: "M-BOM" });
menuItem.setIcon("images/refresh_icon.png");
menuItem.addEventListener("click", function(e) {
var mbom = new MBOM();
self.add(mbom);
});
var menuItem = menu.add({ title: "S-BOM" });
menuItem.setIcon("images/refresh_icon.png");
menuItem.addEventListener("click", function(e) {
var sbom = new SBOM();
self.add(sbom);
});
var menuItem = menu.add({ title: "Logout" });
menuItem.setIcon("Arrow-Hover.jpg");
menuItem.addEventListener("click", function(e) {
alert("Logout");
});
}
}
/////////////////////////////////////////////////////////////////////////////
});
var webview = Titanium.UI.createWebView({
url:'/ui/common/Login.html'
});
self.add(webview);
return self;
};
module.exports = ApplicationWindow;