how to unmute video using an observer?
if I remove "true" in this code "$(this).prop("muted", true);" the video won't play automatically and if I don't remove it the video play automatically but is still muted
$("video").each(function() {
$(this).prop({
controls: true,
controlslist: "nodownload"
});
const observer = new window.IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
if (this.paused) {
$(this).prop("muted", true);
this.play();
}
} else {
this.pause();
}
}, {
threshold: 0.5,
}
);
observer.observe(this);
});
Related
I try to use computed to watch navigator.onLine but not work until I refresh the web?
<template><div>{{isOnline}}</div></template>
...
<scirpt>
...
computed: {
isOnline() {
return navigator.onLine;
},
},
...
</script>
Browsers api are not reactive. So whenever their value changes, Vue doesn't know about it.
To listen to navigator.onLine changes, you have to use a native event fired by the browser (see docs):
data () {
return {
online: false,
}
},
methods: {
onOffline () { this.online = false },
onOnline () { this.online = true },
created() {
window.addEventListener('offline', this.onOffline)
window.addEventListener('online', this.onOnline)
},
destroyed() {
window.removeEventListener('offline', this.onOffline)
window.removeEventListener('online', this.onOnline)
}
}
Note: be careful with SSR, window doesn't exist on server.
Like #Kaocash said browsers api are not reactive, so a watcher won't work
Original answer :
Well, computed property will be updated when data changes on your component,
what you need is a watcher :
<template><div>{{isOnline}}</div></template>
...
<script>
...
data() {
return {
isOnline: true
}
},
watch: {
'navigator.onLine'(val) {
this.isOnline = val
},
},
...
</script>
I am newbie to Splidejs.
I want to make slides in my web page to be autoplayed when page loaded.
I tried with this code but it doesn't accomplish my task
(I set autoplay property to true).
document.addEventListener( 'DOMContentLoaded', function () {
new Splide('#image-slider').mount() , {
autoplay:true,
type : 'loop',
cover : true,
height : '1000rem',
perPage:3,
};
} );
I just changed the code to the following code and the problem solved.
<script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider', {
arrows :'false' ,
type : 'loop',
perPage : 1,
autoplay: true,
cover: false,
height : '100rem',
}).mount();
});
</script>
I am using ffmpeg as my module in Node js app for making video thumbnails.the thing is , it makes it from the beginning of the Video. and some of them begins with a black frame so the thumbnail will be a black picture.I want to know how should I make it from the middle of the video so that they wont be black anymore.
here is what I did:
module.exports.createVideoThumbnail = function (path, destination, fileName, cb)
{
try
{
var process = new ffmpeg(path);
process.then(function (video) {
video.fnExtractFrameToJPG(destination, {
frame_rate: 1,
number: 1,
start_time: 20,
duration_time: 1,
file_name: `${fileName}`
}, function (error, files) {
if (!error)
{
console.log('Frames: ');
cb(1)
}
else
{ console.log(error); cb(-1); }
});
}, function (err) {
console.log('Error: ' + err);
cb(-1)
});
}
catch (e)
{
console.log(e.code);
console.log(e.msg);
cb(-1)
}
}
start_time does not work as it has bug in one of its core files. You can resolve the problem using the hs-node-ffmpeg package to resolve it.
Here's a GIF demo, using a test extension.
I'm using this test extension to test out chrome.browserAction.setBadgeText(). I've noticed that when navigating, the badge text is flickering. All I am doing is clicking any hyperlinks on a webpage, so there's no page refreshing, nor navigating Back.
Is there a way to keep it from flickering? If not, is there a way to keep it persistent for as long as possible?
Code in question:
var SetBadge = function () {
chrome.windows.getCurrent({
populate: true
}, function (win) {
for (let i = 0; i < win.tabs.length; ++i) {
if (win.tabs[i].active) {
chrome.browserAction.setBadgeText({
text: "8",
tabId: win.tabs[i].id
});
}
}
});
};
chrome.webNavigation.onCommitted.addListener(() => {
SetBadge();
});
chrome.webRequest.onSendHeaders.addListener(() => {
SetBadge();
});
chrome.webRequest.onBeforeRedirect.addListener(() => {
SetBadge();
});
chrome.tabs.onActivated.addListener(() => {
SetBadge();
});
chrome.webRequest.onCompleted.addListener(() => {
SetBadge();
});
I'v got jwplayer source code from github. I want to change some scripts and built the player. So, i need to change file source from javascript in flash. In javascript i'm setting some params "host" and "flv_id":
jwplayer("mediaplayer").setup({
autostart: false,
controlbar: "none",
displayclick: "none",
smoothing: true,
stretching: "exactfit",
icons: false,
flashplayer: "/jwplayer.swf",
file: "/videos/3aae1ef41d.flv",
flv_id: "115554",
host: "<?php echo $host; ?>",
provider: "http",
startparam: "start",
height: 400,
width: 650,
events: {
onComplete: function() {
},
onPause: function(event) {
},
onError: function() {
}
}
});
In flash i have some class, which can make post-request:
var post:Post = new Post("http://"+someparameters["host"]+"/video/flv");
post.variables.id = someparameters["flv_id"];
post.Send(Go);
Go - is success callback function that returns some flvlink.
Go(link:String):void {
//link - is source, that i need to play
}
The player is playing the "/videos/3aae1ef41d.flv". But i want to play the source from Go(); I have class "Post", but i don't know the place to paste my code. Now, i haven't any changes in default source code. I don't know which file of player source code to edit. So, i need to know, how i can use my "Post" class to play video from Go function.