ableplayer/tests/test17.html at develop · binaryvision/ableplayer · GitHub

69 lines (56 loc) · 2.23 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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Able Player Test #17</title>

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

<script src="../thirdparty/modernizr.custom.js"></script>

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

<script src="../thirdparty/jquery.cookie.js"></script>

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

<link rel="stylesheet" href="../styles/ableplayer-transcript.css" type="text/css"/>

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

<style>

div.able {

display: none;

}

</style>

<script>

$(document).ready(function() {

$('#showPlayers').on('click',function(){

if ($('div.able').is(':hidden')) {

$('div.able').show();

$(this).text('Hide players');

}

else {

$('div.able').hide();

$(this).text('Show players');

}

});

});

</script>

</head>

<body>

<h1>Able Player Test #17:<br/>Media player hidden by default, exposed dynamically</h1>

<p>For additional test see the <a href="index.html">Index of <em>Able Player</em> Examples</a>.</p>

<button id="showPlayers">Show players</button>

<audio id="audio1" preload="auto" data-able-player>

<source type="audio/ogg" src="../media/smallf.ogg"/>

<source type="audio/mpeg" src="../media/smallf.mp3"/>

</audio>

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

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

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

<track kind="subtitles" src="../media/wwa_captions_es.vtt" srclang="es" label="Espanol"/>

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

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

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

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

</video>

</body>

</html>