I need to pause a video if it is not in view
the below code works only for the first video in list
how to make it working for all .bvideo ?
<video class='bvideo' src='a.mp4' poster='a.jpg' preload='none' controls></video>
<video class='bvideo' src='b.mp4' poster='b.jpg' preload='none' controls></video>
<video class='bvideo' src='c.mp4' poster='c.jpg' preload='none' controls></video>
let io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(!entry.isIntersecting){entry.target.pause();}
});
});
$(document).ready(function(){
io.observe(document.querySelector('.bvideo'));
});
Use querySelectorAll() method.
$(document).ready(function() {
let bvideos = document.querySelectorAll('.bvideo');
bvideos.forEach(bvideo => io.observe(bvideo));
});
I am making a mental health website in which there is a meditation area. there are two div cards and inside of each, there is one button that plays and stops music when clicked.
I am using script tags inside the html file for extra information.
Purpose:
when the buttons inside each of the two card div is clicked, a guided meditation audio should play.
there is a long audio and a short audio that comes in two formats of mp3 and ogg.
Problem:
one of the audios play perfectly but the second one doesn't work. meaning it wont play and stop when the button is clicked.
can you please check and tell me what's wrong.
<div class="main-box">
<div class="slot1">
<p class="line line1">this is the long music</p>
<audio id=rollSound loop>
<source src="sounds/long-medi.mp3" type="audio/mpeg">
<source src="sounds/long-medi.ogg" type="audio/ogg">
Your browser does not support the sound files. Please proceed by using other solutions.
<!--the obove text will only show if the users' browser does not play the two files. -->
</audio>
<button id=play>play/stop</button>
<script>
const rollSound = document.getElementById('rollSound');
const btn = document.getElementById('play');
btn.addEventListener("click", e => rollSound.paused ? rollSound.play() : rollSound.pause());
</script>
</div>
<div class="slot2">
<p class="line line2">this is for short music</p>
<audio id=shortsound loop>
<source src="sounds/short-medi.mp3" type="audio/mpeg">
<source src="sounds/short-medi.ogg" type="audio/ogg">
Your browser does not support the sound files. Please proceed by using other solutions.
</audio>
<button id=roll>play/stop</button>
<script>
const shortsound = document.getElementById('shortsound');
const btn = document.getElementById('roll');
btn.addEventListener("click", e => shortsound.paused ? shortsound.play() : shortsound.pause());
</script>
</div>
There is an error when executing your script because you can not declare var btn = a second time.
Instead change the following
const shortsound = document.getElementById('shortsound');
const btn = document.getElementById('roll');
btn.addEventListener("click", e => shortsound.paused ? shortsound.play() : shortsound.pause());
to something like this:
const shortsound = document.getElementById('shortsound');
const btn2 = document.getElementById('roll');
btn2.addEventListener("click", e => shortsound.paused ? shortsound.play() : shortsound.pause());
and it will work, see this jsfiddle:
https://jsfiddle.net/snw3950L/1/
I'd like to listen to the load event of my images. And here's how I'm trying to.
export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => {
const alt = useMemo(() => initialAlt || generator.next().value, [src, initialAlt]);
const { publicRuntimeConfig } = getConfig();
return (
<picture style={style} className={picCls}>
{!publicRuntimeConfig.dev && <source srcSet={`${src}.webp`} type="image/webp"/>}
<img onLoad={onLoad} className={imgCls} alt={alt} src={src} loading={lazy ? 'lazy' : 'eager'}
onClick={onClick} />
</picture>
);
};
As I understand, this code should work fine. But when images are cached, they don't trigger load event from time to time.
I need to know, when all my images are loaded. To do this I checked the amount of loaded images. But it doesn't work when at least 1 of images didn't trigger the event. error event doesn't fire as well, and I can see that all of images are always loaded in the debugger tools.
What should I do?
I know I can add something like src?_dc=timestamp, but I do need caching, it really speeds up re-upload.
UPD: All of the loaded images returns 304 status. But the amount of images, that triggers load differs from 0 to total amount
Okay, this is not exactly what I asked for, but I found one thing that can help me - the completed field
export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => {
const alt = useMemo(() => initialAlt || generator.next().value, [src, initialAlt]);
const ref = useRef<HTMLImageElement>();
const onLoadTriggered = useRef(false);
const { publicRuntimeConfig } = getConfig();
const onLoadFunc = useCallback(() => {
!onLoadTriggered.current && onLoad?.();
onLoadTriggered.current = true;
}, [onLoad]);
useEffect(() => {
ref.current.complete && onLoadFunc();
}, []);
return (
<picture style={style} className={picCls}>
{!publicRuntimeConfig.dev && <source srcSet={`${src}.webp`} type="image/webp"/>}
<img onLoad={onLoadFunc} className={imgCls} alt={alt} src={src} loading={lazy ? 'lazy' : 'eager'}
ref={ref} onClick={onClick} />
</picture>
);
};
This code did solve my problems, but it seems like it's a crutch. So, I've decided to leave this solution here, but I'm still waiting for the correct answer
this issue occurs because always it fetch images from cache
please add timestamp after image URL
you can do it from both side
From Backend (DB side)
for example :
#ImagePath+ REPLACE(ImagePath, '~', '') + '?time='+FORMAT(getdate(),'yyyyMMddHHmmssffff')
in IONIC code (Typescript)
for example :
npm i moment --save
import * as moment from moment
const dateStringThatWorksForIonicDatepicker = moment.unix(1536883200000).format(‘YYYY-MM-DD’)
I am trying to do a little project and I need to get a webcam stream. I have read many articles and followed them but they have all come out with the same error.
Cannot set property 'srcObject' of null TypeError
function James() {
var video = document.getElementById('video');
var select = document.getElementsByClassName('select');
function handleError(error) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}
function start() {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
video.play();
}) .catch(handleError);
}
start();
return (
<div className="contentarea">
<div className="camera">
<video id="video" autoPlay></video>
</div>
</div>
)
}
export default James;
In React, it's generally not a good idea to use getElementById. Chances are in this case, that's running before the video element is even rendered, so you're storing null there.
Instead, you should be using a ref. Something like const video = useRef() and then setting ref={video} on your video element. Then you can use video.current to get a reference to the video element at any time, without worrying about rendering issues.
I'm trying to implement videojs with the IMA plugin, and i need to capture the stop and play event from a button outside the videobox in my react app.
The thing is i capture the event on my buttons and works fine, but they dosen t work when i want to stop the ADS.. why? Any clue?
i use this example
https://googleads.github.io/videojs-ima/examples/simple/
and i log the player.ima and return this, but i cant access to any element..
here is my code! thanks!
index.js
<video id="content_video"
class="video-js vjs-default-skin""
controls
>
<source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" ></source>
</video>
<script>
window.player = videojs
var player = window.player('content_video');
var options = {
id: 'content_video',
adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator='
};
player.ima(options);
</script>
home.js
handlePlay = () => {
if(this.props.showPlay == 'block'){
const player = window.videojs(`#content_video`)
player.play() //only work on the video not in ads
} else {
const player = window.videojs(`#content_video`)
player.pause() //only work on the video not in ads
}
}