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

Repository navigation

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Video with synchronized sign language from local sources | 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>

<style>

#video-wrapper {

width: 500px;

}

</style>

</head>

<body>

<header>

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

</header>

<div class="body-wrapper">

<nav id="navigation-placeholder">

</nav>

<main>

<h1>Video with sign language</h1>

<p>An accompanying sign language video is provided for each <code><source></code> element using the

<code>data-sign-src</code> attribute. This results in a sign language video being played in a pop-up window

in sync with the program video. Unfortunately, this does not currently work in iOS.

</p>

<div id="video-wrapper">

<video id="video1" preload="auto" poster="../media/wwa.jpg" 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>

</div>

</main>

</div>

<script src="demos.js"></script>

</body>

</html>