子コンポーネントでのメソッドのコール

1// videoPlayer.js
2import { LightningElement, api } from "lwc";
3
4export default class VideoPlayer extends LightningElement {
5  @api videoUrl;
6
7  @api
8  get isPlaying() {
9    const player = this.template.querySelector("video");
10    return player !== null && player.paused === false;
11  }
12
13  @api
14  play() {
15    const player = this.template.querySelector("video");
16    // the player might not be in the DOM just yet
17    if (player) {
18      player.play();
19    }
20  }
21
22  @api
23  pause() {
24    const player = this.template.querySelector("video");
25    if (player) {
26      // the player might not be in the DOM just yet
27      player.pause();
28    }
29  }
30
31  // private getter for computed value
32  get videoType() {
33    return "video/" + this.videoUrl.split(".").pop();
34  }
35}

1<!-- videoPlayer.html -->
2<template>
3  <div class="fancy-border">
4    <video autoplay>
5      <source src={videoUrl} type={videoType} />
6    </video>
7  </div>
8</template>

1<!-- methodCaller.html -->
2<template>
3  <div>
4    <c-video-player video-url={video}></c-video-player>
5    <button onclick={handlePlay}>Play</button>
6    <button onclick={handlePause}>Pause</button>
7  </div>
8</template>

1// methodCaller.js
2import { LightningElement } from "lwc";
3
4export default class MethodCaller extends LightningElement {
5  video = "https://www.w3schools.com/tags/movie.mp4";
6
7  handlePlay() {
8    this.template.querySelector("c-video-player").play();
9  }
10
11  handlePause() {
12    this.template.querySelector("c-video-player").pause();
13  }
14}

1@api get isPlaying() {
2    const player = this.template.querySelector('video');
3    return player !== null && player.paused === false;
4}

1@api play(speed) { … }