ableplayer/demos/external1.html at refactorRefreshControls · ableplayer/ableplayer · GitHub

93 lines (84 loc) · 3.33 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

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Transcript in an external container</title>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>

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

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

<style>

div#wrapper {

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: flex-start;

width: 1280px;

max-width: 98%;

background: #fff;

margin-top: 2rem;

}

#player {

width: 480px;

margin: 0 20px;

}

#transcript {

width: 500px;

margin: 1em;

}

#transcript div.able-desc {

width: 90%;

}

</style>

</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>Transcript in an external container</h1>

<p>This demo includes an empty <div> element, and a

<strong>data-transcript-div</strong> attribute on the <video> tag

which identifies the <em>id</em> of the empty container.

Able Player generates an automated interactive transcript

from the chapters, captions, and description tracks,

and writes it to the external container rather than to a popup.</p>

<div id="wrapper">

<div id="player">

<video id="video1" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player data-transcript-div="transcript" playsinline>

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

<source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.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>

<div id="transcript"></div>

</div>

</main>

</main>

</body>

</html>