ableplayer/demos/multi3.html at develop · ableplayer/ableplayer · GitHub

73 lines (65 loc) · 3.69 KB

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Multiple video Players | Able Player Demos</title>

<link rel="stylesheet" href="demos.css" type="text/css">

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="../build/ableplayer.min.css" type="text/css"/>

<script src="../build/ableplayer.dist.js"></script>

</head>

<body>

<header>

<div class="title">Able Player Demos</div>

</header>

<nav>

<ul>

<li><a href="index.html">More demos</a></li>

<li><a href="https://ableplayer.github.io/ableplayer">Able Player Home</a></li>

</ul>

</nav>

<main>

<h1>Multiple video Players</h1>

<p>Although it is possible to have multiple players on a single page, this is discouraged

as it might be confusing for users ("which player am I on?").

Note that only the first player can be operated with keystrokes.

Use <a href="playlist2.html">playlists</a> instead.</p>

<h2>Player #1: World Wide Access</h2>

<div id="wrapper">

<video id="video1" preload="auto" data-able-player playsinline>

<source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4" data-sign-src="../media/wwa_sign.mp4"/>

<source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm" data-sign-src="../media/wwa_sign.webm"/>

<track kind="captions" src="../media/wwa_captions_de.vtt" srclang="de" label="Deutsche"/>

<track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English" default/>

<track kind="captions" src="../media/wwa_captions_es.vtt" srclang="es" label="Español"/>

<track kind="subtitles" src="../media/wwa_captions_fr.vtt" srclang="fr" label="Français"/>

<track kind="subtitles" src="../media/wwa_captions_ja.vtt" srclang="ja" lang="ja" label="日本語"/>

<track kind="descriptions" src="../media/wwa_description_de.vtt" srclang="de"/>

<track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"/>

<track kind="descriptions" src="../media/wwa_description_es.vtt" srclang="es"/>

<track kind="descriptions" src="../media/wwa_description_fr.vtt" srclang="fr"/>

<track kind="descriptions" src="../media/wwa_description_ja.vtt" srclang="ja"/>

<track kind="chapters" src="../media/wwa_chapters_de.vtt" srclang="de"/>

<track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"/>

<track kind="chapters" src="../media/wwa_chapters_es.vtt" srclang="es"/>

<track kind="chapters" src="../media/wwa_chapters_fr.vtt" srclang="fr"/>

</video>

<h2>Player #2: The Deadline</h2>

<video id="video2" preload="auto" data-able-player playsinline>

<source type="video/mp4" src="../media/deadline.mp4" data-desc-src="../media/deadline_desc.mp4"/>

<track kind="captions" src="../media/deadline_captions_en.vtt" srclang="en" label="English" default/>

<track kind="captions" src="../media/deadline_captions_ar.vtt" srclang="ar" label="Arabic"/>

<track kind="captions" src="../media/deadline_captions_es.vtt" srclang="es" label="Spanish"/>

<track kind="captions" src="../media/deadline_captions_hi.vtt" srclang="hi" label="Hindi"/>

<track kind="captions" src="../media/deadline_captions_it.vtt" srclang="it" label="Italian"/>

<track kind="captions" src="../media/deadline_captions_pt-br.vtt" srclang="pt-br" label="Portuguese, Brazilian"/>

<track kind="descriptions" src="../media/deadline_descriptions_en.vtt" srclang="en" label="English descriptions"/>

</video>

</div>

</main>

</body>

</html>