ضمان تشغيل أحد الفيديوهات من مجموعة الفيديوهات وإيقاف الفيديو السابق في React

لنفرض لديك مصفوفة بعناوين هذه الفيديوهات ربما تجلبها من API أو من التخيزن المحلي

const Videos = [
  {
    videoURL: 'url_1',
  },
  {
    videoURL: 'url_2',
  },
  {
    videoURL: 'url_3',
  },
];

إن كنت تريد تشغيل فيديو واحد بمكانه، عليك عرضهم ضمن قائمة، وعند الضغط على أي فيديو، تود لتبني العرض وتفعل التشغيل التلقائي ل ID الفيديو المضغوط عليه.

أما إن كان لديك مكون واحد لاستعراض الفيديوهات، 

  render() {
    return 
      (<video src={videos[this.state.currentUrlIdx].VedioURL} autoPlay onEnded={this.handleEnded}/)>;
  }

ودالة للاستجابة لتغيير رابط الفيديو

// حالة لتخزين الفيديو قيد التشغيل
this.state = {
	currentUrlIdx: 0,
}

  
// حدث الاستجابة لانتهاء الفيديو والانتقال للتالي
handleEnded(e) {
	const nextUrlIdx = (this.state.currentUrlIdx + 1) % Vedios.length; // حساب رقم الفيديو التالي
	this.setState({ currentUrlIdx: nextUrlIdx });
}

*****

على كل حال، في الدالة المسؤولة عن الاستجابة لحدث النقر على فيديو معين (لتغيير الفيديو الذي يعمل) يكون لدينا reference أو مرجع للفيديو قيد التشغيل، محفوظ في الحالة، نوقف عمله ثم نحدث الحالة بالفيديو الجديد و نشغله.

  playVideo = () => {
    state.video.play()
  };

  pauseVideo = () => {
    state.video.pause();
  };

handelChangeVedio() => {
  pauseVideo()
  setState({vedio: newVedio});
  playVideo()
}

onPress() => {
	handelChangeVedio()
}