This is driving me nuts!
video.addEventListener 'ended', (e) =>
e.target.currentTime = 0
console.log e.target.currentTime
# 5.33 seconds NOT 0
The video plays, and the ended event is called, but the currentTime is not changed.
This may be able to help you:
video = document.getElementById('video');
begin_play = 50;
play_video_frist = true; //if you want to run only frist time
video.addEventListener("play", capture, false);
function capture(event)
{
if (event.type == "play") {
if (play_video_frist) {
play_video_frist = false;
video.currentTime = begin_play;
}
}
}
Related
I am trying to use webkitSpeechRecognition with the continuous setting set to false (when the user stops speaking, webkitSpeechRecognition auto stops) but when I stop speaking and the webkitSpeechRecognition stops, when using Safari iOS and macOS still show that the microphone is still listening. If I manually start it and stop it, I don't have this problem.f
In order to get Safari to recognize that the microphone is no longer listening, I have to start and manually stop webkitSpeechRecognition again.
Am I doing something wrong? Is there a workaround to this?
let speechrecognition;
if ("webkitSpeechRecognition" in window) {
// set microphone to show
speechrecognition = new webkitSpeechRecognition();
// stop listening after the user stops speaking or it can keep listening until the user stops
speechrecognition.continuous = false;
// interim results along with the final results
speechrecognition.interimResults = true;
speechrecognition.onstart = () => {
console.log ("started");
};
speechrecognition.onend = () => {
console.log ("stopped");
};
let final_transcript = "";
speechrecognition.onresult = (event) => {
// Create the interim transcript string locally because we don't want it to persist like final transcript
let interim_transcript = "";
// Loop through the results from the speech recognition object.
for (let i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
document.getElementsByClassName("dict")[0].innerHTML = final_transcript;
} else {
interim_transcript += event.results[i][0].transcript;
document.getElementsByClassName("dict")[0].innerHTML = interim_transcript;
}
}
final_transcript = "";
};
}
<div class="dict"></div>
<button onclick="speechrecognition.start();">start</button>
<button onclick="speechrecognition.stop();">stop</button>
the problem with the script I have is it starts out playing and then pauses when button is pressed I need the opposite. Plus I need the sound to be in sync with the length of the images in the array and both the image sequence and the sound file should play in a loop and start out as paused and play when the button is pressed.
HTML
<div>
<button id="bt1" onclick="togglePlay();toggle()"></button>
</div>
<script>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
let
loop,
index = 0,
images = [
"cat/1.svg", "cat/2.svg", "cat/3.svg", "cat/4.svg", "cat/5.svg", "cat/6.svg", "cat/7.svg", "cat/8.svg",
"cat/9.svg", "cat/10.svg", "cat/11.svg", "cat/12.svg", "cat/13.svg", "cat/14.svg", "cat/15.svg", "cat/16.svg",
"cat/17.svg", "cat/18.svg"
];
function startLoop() {
loop = setInterval(() => {
document.querySelector('img').src = images[index];
index++;
// Loop images array
if (index % images.length === 0) {
index = 0;
}
}, 100);
}
function toggle() {
if (loop) {
clearInterval(loop);
loop = null;
} else {
startLoop();
}
}
startLoop();
function togglePlay() {
isPlaying ? myAudio.pause() : myAudio.play();
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
</script>
I have a requirement where I need to play a html video with time jumps.
Scenario is like this:-
I have an array that contains time markers like this const obj = [{start: 2.64, end: 5.79}, {start: 7.95, end: 8.69}].
The requirement is that the video should start from 2.64 and play till 5.79 and then jump to 7.95 and then end at 8.69 and so on.
My solution is like this:-
const timers = this.state.timers;
let video = this.videoRef;
if (video) {
let index = 0;
video.addEventListener("timeupdate", () => {
if (parseInt(video.currentTime) == parseInt(timers[timers.length - 1].end)) {
video.pause()
}
if (timers[index]) {
if (parseInt(video.currentTime) == parseInt(timers[index].end)) {
if (index <= timers.length - 1) {
index++;
if (timers[index]) {
video.currentTime = timers[index].start;
}
}
}
}
this.setState({
tickTime: Math.ceil(video.currentTime)
})
})
video.play().then(res => {
video.currentTime = timers[0].start
})
}
It is working fine but when the video currenttime is like 2.125455 and in time object has end time 2.95, the parseInt function make both the time 3 and the video jumps to 3, so the 8 ms never plays, these 8ms are also very critical in my case
any solution on this please?
I am stuck for a while now
Well, I was able to resolve the problem
Thanks anyways
Here is the solution if anyone else facing it
const timers = this.state.timers;
let video = this.videoRef;
if (video) {
let index = 0;
video.addEventListener("timeupdate", () => {
if (video.currentTime >= timers[timers.length - 1].end) {
video.pause()
}
if (timers[index]) {
if ((video.currentTime) >= (timers[index].end)) {
if (index <= timers.length - 1) {
index++;
if (timers[index] && video.currentTime < timers[index].start) {
video.currentTime = timers[index].start;
}
}
}
}
this.setState({
tickTime: Math.ceil(video.currentTime)
})
})
video.play().then(res => {
video.currentTime = timers[0].start
})
}
Scenario
Our app aims to detect beacons placed inside the restaurants our app
uses react-native-beacons-manager
When our app detects a beacon, I have developed a cloud function that accepts the beacon's major key and use it to query data of that restaurant from my database
The Cloud function then sends a push notification on the user about the restaurant details.
The Problem
The way I detect the beacons is not stable. this is my flow. I created a function located at
this.beaconsDidRangeEvent = Beacons.BeaconsEventEmitter.addListener(
//function-here
);
I can receive the beacons information like uuid, major and minor key and proximity (immediate, near, far, unknown) . Now inside that function I use the major key to determine the individuality of each beacons. Now, I've made a condition like this:
let beaconArr = data.beacons;
console.log(beaconArr);
console.log(count);
if (beaconArr.length > 0) {
console.log("beacons detected!");
let major = data.beacons[0].major;
let prox = data.beacons[0].proximity;
if ((prox === "near" || prox === "far") && beaconFlag === false && count === 0) {
console.log("beacon Action");
this.props.beaconAction(major);
this.props.createCheckInHistory(user.uid);
beaconFlag = true;
count++;
} else {
console.log("counter turned to 1!");
console.log(data);
beaconFlag = true;
}
} else {
console.log("no beacons detected!");
count = 0;
beaconFlag = false;
}
Expected Result
I expect that the functions inside the condition is true will only fire once.
Actual Result
Sometimes, its ok sometimes its not. even if im still at the range of the beacon, suddenly the beacon's array got 0. Then suddenly i'll receive a push notification again and again.
componentDidMount() Code
componentDidMount() {
this.props.selectedIcon('map');
firebase
.messaging()
.getInitialNotification()
.then(notification => {
console.log("Notification which opened the app: ", notification);
});
const user = firebase.auth().currentUser;
let count = 0;
let beaconFlag = false;
// will be set as a reference to "regionDidEnter" event:
this.beaconsDidRangeEvent = Beacons.BeaconsEventEmitter.addListener(
"beaconsDidRange",
_.throttle(data => {
let beaconArr = data.beacons;
console.log(beaconArr);
console.log(count);
if (beaconArr.length > 0) {
console.log("beacons detected!");
let major = data.beacons[0].major;
let prox = data.beacons[0].proximity;
if ((prox === "near" || prox === "far") && beaconFlag === false && count === 0) {
console.log("beacon Action");
this.props.beaconAction(major);
this.props.createCheckInHistory(user.uid);
beaconFlag = true;
count++;
} else {
console.log("counter turned to 1!");
console.log(data);
beaconFlag = true;
}
} else {
console.log("no beacons detected!");
count = 0;
beaconFlag = false;
}
}, 3000)
);
// monitoring events
this.regionDidEnterEvent = Beacons.BeaconsEventEmitter.addListener(
"regionDidEnter",
data => {
console.log("monitoring - regionDidEnter data: ", data);
}
);
// Monitoring: Listen for device leaving the defined region
this.regionDidExitEvent = Beacons.BeaconsEventEmitter.addListener(
"regionDidExit",
data => {
console.log("monitoring - regionDidExit data: ", data);
}
);
}
This is a common problem when ranging in beacon apps. Sometimes the detected beacons will briefly drop out then come back again. This can be solved by a software filter where you keep track of all beacons you have recently seen, and only perform an operation of it has not happened recently. In your case, you may use the major as the key to the index into the filter object.
// scope this globally
var minimumRetriggerMillis = 3600 * 1000; // 1hr
var recentTriggers = {};
// Before executing your trigger action:
var now = new Date().getTime();
if (recentTriggers[minor] == null || now-recentTriggers[minor] > minimumRetriggerMillis) {
recentTriggers[minor] = now;
// TODO: execute trigger logic here
}
I've been struggling with the Vimeo API for a few days now.
I want to get the video duration and show a countdown when it's playing, and pause it when the video is paused in HTML.
Does anyone know how to do this or point me in the right direction?
Thanks,
Aron
I developed a countdown to play at ad videos before the main video in my website. I believe the code below may help you, you should adapt it to your needs.
$(document).on('ready',function(){
/* PLAY AD VIDEO */
var $video = $('#ad_video),
player = new Vimeo.Player($video);
player.play();
/* COUNTDOWN */
var interval = null;
player.getDuration().then(function(duration) {
var duration_val = duration;
$("#countdown").attr("data-countdown", duration);
$("#countdown").html('Video starts in ' + (duration));
interval = setInterval(function(){
player.getCurrentTime().then(function(seconds) {
var seconds = Math.floor(seconds);
var countdown_val = $("#countdown").attr("data-countdown");
if(seconds == (duration_val - countdown_val - 1))
{
$("#countdown").html('Video starts in ' + (duration_val - seconds));
$("#countdown").attr("data-countdown", duration_val - seconds);
}
if(countdown_val == 1)
{
clearInterval(interval);
}
});
});
}, 1000);
/* PLAY MAIN VIDEO */
$(function(){
var $video = $('#ad_video),
player = new Vimeo.Player($video);
player.on('ended', play_main_video);
});
function play_main_video() {
$("#countdown").hide();
$("#text_countdown").hide();
$('#ad_video).hide();
$('#main_video).show();
var $video = $('#main_video),
player = new Vimeo.Player($video);
player.play();
};
});