src_minplayer.compatibility.js.html in HTML5 Media 7
1 /** The minplayer namespace. */
2 var minplayer = minplayer || {};
3
4 // Private function to check a single element's play type.
5 function checkPlayType(elem, playType) {
6 if ((typeof elem.canPlayType) === 'function') {
7 if (typeof playType === 'object') {
8 var i = playType.length;
9 var mimetype = '';
10 while (i--) {
11 mimetype = checkPlayType(elem, playType[i]);
12 if (!!mimetype) {
13 break;
14 }
15 }
16 return mimetype;
17 }
18 else {
19 var canPlay = elem.canPlayType(playType);
20 if (('no' !== canPlay) && ('' !== canPlay)) {
21 return playType;
22 }
23 }
24 }
25 return '';
26 }
27
28 /**
29 * @constructor
30 * @class This class is used to define the types of media that can be played
31 * within the browser.
32 * <p>
33 * <strong>Usage:</strong>
34 * <pre><code>
35 * var playTypes = new minplayer.compatibility();
36 *
37 * if (playTypes.videoOGG) {
38 * console.log("This browser can play OGG video");
39 * }
40 *
41 * if (playTypes.videoH264) {
42 * console.log("This browser can play H264 video");
43 * }
44 *
45 * if (playTypes.videoWEBM) {
46 * console.log("This browser can play WebM video");
47 * }
48 *
49 * if (playTypes.audioOGG) {
50 * console.log("This browser can play OGG audio");
51 * }
52 *
53 * if (playTypes.audioMP3) {
54 * console.log("This browser can play MP3 audio");
55 * }
56 *
57 * if (playTypes.audioMP4) {
58 * console.log("This browser can play MP4 audio");
59 * }
60 * </code></pre>
61 */
62 minplayer.compatibility = function() {
63 var elem = null;
64
65 // Create a video element.
66 elem = document.createElement('video');
67
68 /** Can play OGG video */
69 this.videoOGG = checkPlayType(elem, 'video/ogg');
70
71 /** Can play H264 video */
72 this.videoH264 = checkPlayType(elem, [
73 'video/mp4',
74 'video/h264'
75 ]);
76
77 /** Can play WEBM video */
78 this.videoWEBM = checkPlayType(elem, [
79 'video/x-webm',
80 'video/webm',
81 'application/octet-stream'
82 ]);
83
84 // Create an audio element.
85 elem = document.createElement('audio');
86
87 /** Can play audio OGG */
88 this.audioOGG = checkPlayType(elem, 'audio/ogg');
89
90 /** Can play audio MP3 */
91 this.audioMP3 = checkPlayType(elem, 'audio/mpeg');
92
93 /** Can play audio MP4 */
94 this.audioMP4 = checkPlayType(elem, 'audio/mp4');
95 };
96
97 if (!minplayer.playTypes) {
98
99 /** The compatible playtypes for this browser. */
100 minplayer.playTypes = new minplayer.compatibility();
101
102 /** See if we are an android device. */
103 minplayer.isAndroid = (/android/gi).test(navigator.appVersion);
104
105 /** See if we are an iOS device. */
106 minplayer.isIDevice = (/iphone|ipad/gi).test(navigator.appVersion);
107
108 /** See if we are a playbook device. */
109 minplayer.isPlaybook = (/playbook/gi).test(navigator.appVersion);
110
111 /** See if we are a touchpad device. */
112 minplayer.isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
113
114 /** Determine if we have a touchscreen. */
115 minplayer.hasTouch = 'ontouchstart' in window && !minplayer.isTouchPad;
116 }
117
File
player/doc/symbols/src/src_minplayer.compatibility.js.html
View source
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
.KEYW {color: #933;}
.COMM {color: #bbb; font-style: italic;}
.NUMB {color: #393;}
.STRN {color: #393;}
.REGX {color: #339;}
.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
</style></head><body><pre><span class='line'> 1</span> <span class="COMM">/** The minplayer namespace. */</span><span class="WHIT">
<span class='line'> 2</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">minplayer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 3</span>
<span class='line'> 4</span> </span><span class="COMM">// Private function to check a single element's play type.</span><span class="WHIT">
<span class='line'> 5</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">playType</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 6</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">elem.canPlayType</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'function'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 7</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">playType</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'object'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 8</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">playType.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 9</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">mimetype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 10</span> </span><span class="WHIT"> </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="PUNC">--</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 11</span> </span><span class="WHIT"> </span><span class="NAME">mimetype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">playType</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 12</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="PUNC">!</span><span class="NAME">mimetype</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 13</span> </span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 14</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 15</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 16</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">mimetype</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 17</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 18</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 19</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">canPlay</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.canPlayType</span><span class="PUNC">(</span><span class="NAME">playType</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 20</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="STRN">'no'</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">canPlay</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">''</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">canPlay</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 21</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">playType</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 22</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 23</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 24</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 25</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 26</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 27</span>
<span class='line'> 28</span> </span><span class="COMM">/**
<span class='line'> 29</span> * @constructor
<span class='line'> 30</span> * @class This class is used to define the types of media that can be played
<span class='line'> 31</span> * within the browser.
<span class='line'> 32</span> * <p>
<span class='line'> 33</span> * <strong>Usage:</strong>
<span class='line'> 34</span> * <pre><code>
<span class='line'> 35</span> * var playTypes = new minplayer.compatibility();
<span class='line'> 36</span> *
<span class='line'> 37</span> * if (playTypes.videoOGG) {
<span class='line'> 38</span> * console.log("This browser can play OGG video");
<span class='line'> 39</span> * }
<span class='line'> 40</span> *
<span class='line'> 41</span> * if (playTypes.videoH264) {
<span class='line'> 42</span> * console.log("This browser can play H264 video");
<span class='line'> 43</span> * }
<span class='line'> 44</span> *
<span class='line'> 45</span> * if (playTypes.videoWEBM) {
<span class='line'> 46</span> * console.log("This browser can play WebM video");
<span class='line'> 47</span> * }
<span class='line'> 48</span> *
<span class='line'> 49</span> * if (playTypes.audioOGG) {
<span class='line'> 50</span> * console.log("This browser can play OGG audio");
<span class='line'> 51</span> * }
<span class='line'> 52</span> *
<span class='line'> 53</span> * if (playTypes.audioMP3) {
<span class='line'> 54</span> * console.log("This browser can play MP3 audio");
<span class='line'> 55</span> * }
<span class='line'> 56</span> *
<span class='line'> 57</span> * if (playTypes.audioMP4) {
<span class='line'> 58</span> * console.log("This browser can play MP4 audio");
<span class='line'> 59</span> * }
<span class='line'> 60</span> * </code></pre>
<span class='line'> 61</span> */</span><span class="WHIT">
<span class='line'> 62</span> </span><span class="NAME">minplayer.compatibility</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 63</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">elem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 64</span>
<span class='line'> 65</span> </span><span class="WHIT"> </span><span class="COMM">// Create a video element.</span><span class="WHIT">
<span class='line'> 66</span> </span><span class="WHIT"> </span><span class="NAME">elem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">'video'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 67</span>
<span class='line'> 68</span> </span><span class="WHIT"> </span><span class="COMM">/** Can play OGG video */</span><span class="WHIT">
<span class='line'> 69</span> </span><span class="WHIT"> </span><span class="NAME">this.videoOGG</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'video/ogg'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 70</span>
<span class='line'> 71</span> </span><span class="WHIT"> </span><span class="COMM">/** Can play H264 video */</span><span class="WHIT">
<span class='line'> 72</span> </span><span class="WHIT"> </span><span class="NAME">this.videoH264</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="WHIT">
<span class='line'> 73</span> </span><span class="WHIT"> </span><span class="STRN">'video/mp4'</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 74</span> </span><span class="WHIT"> </span><span class="STRN">'video/h264'</span><span class="WHIT">
<span class='line'> 75</span> </span><span class="WHIT"> </span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 76</span>
<span class='line'> 77</span> </span><span class="WHIT"> </span><span class="COMM">/** Can play WEBM video */</span><span class="WHIT">
<span class='line'> 78</span> </span><span class="WHIT"> </span><span class="NAME">this.videoWEBM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="WHIT">
<span class='line'> 79</span> </span><span class="WHIT"> </span><span class="STRN">'video/x-webm'</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 80</span> </span><span class="WHIT"> </span><span class="STRN">'video/webm'</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 81</span> </span><span class="WHIT"> </span><span class="STRN">'application/octet-stream'</span><span class="WHIT">
<span class='line'> 82</span> </span><span class="WHIT"> </span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 83</span>
<span class='line'> 84</span> </span><span class="WHIT"> </span><span class="COMM">// Create an audio element.</span><span class="WHIT">
<span class='line'> 85</span> </span><span class="WHIT"> </span><span class="NAME">elem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">'audio'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 86</span>
<span class='line'> 87</span> </span><span class="WHIT"> </span><span class="COMM">/** Can play audio OGG */</span><span class="WHIT">
<span class='line'> 88</span> </span><span class="WHIT"> </span><span class="NAME">this.audioOGG</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'audio/ogg'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 89</span>
<span class='line'> 90</span> </span><span class="WHIT"> </span><span class="COMM">/** Can play audio MP3 */</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="WHIT"> </span><span class="NAME">this.audioMP3</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'audio/mpeg'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 92</span>
<span class='line'> 93</span> </span><span class="WHIT"> </span><span class="COMM">/** Can play audio MP4 */</span><span class="WHIT">
<span class='line'> 94</span> </span><span class="WHIT"> </span><span class="NAME">this.audioMP4</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">checkPlayType</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'audio/mp4'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 95</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 96</span>
<span class='line'> 97</span> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">minplayer.playTypes</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 98</span>
<span class='line'> 99</span> </span><span class="WHIT"> </span><span class="COMM">/** The compatible playtypes for this browser. */</span><span class="WHIT">
<span class='line'>100</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.playTypes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">minplayer.compatibility</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>101</span>
<span class='line'>102</span> </span><span class="WHIT"> </span><span class="COMM">/** See if we are an android device. */</span><span class="WHIT">
<span class='line'>103</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.isAndroid</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="REGX">/android/gi</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">test</span><span class="PUNC">(</span><span class="NAME">navigator.appVersion</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>104</span>
<span class='line'>105</span> </span><span class="WHIT"> </span><span class="COMM">/** See if we are an iOS device. */</span><span class="WHIT">
<span class='line'>106</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.isIDevice</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="REGX">/iphone|ipad/gi</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">test</span><span class="PUNC">(</span><span class="NAME">navigator.appVersion</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>107</span>
<span class='line'>108</span> </span><span class="WHIT"> </span><span class="COMM">/** See if we are a playbook device. */</span><span class="WHIT">
<span class='line'>109</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.isPlaybook</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="REGX">/playbook/gi</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">test</span><span class="PUNC">(</span><span class="NAME">navigator.appVersion</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>110</span>
<span class='line'>111</span> </span><span class="WHIT"> </span><span class="COMM">/** See if we are a touchpad device. */</span><span class="WHIT">
<span class='line'>112</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.isTouchPad</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="REGX">/hp-tablet/gi</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">test</span><span class="PUNC">(</span><span class="NAME">navigator.appVersion</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>113</span>
<span class='line'>114</span> </span><span class="WHIT"> </span><span class="COMM">/** Determine if we have a touchscreen. */</span><span class="WHIT">
<span class='line'>115</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.hasTouch</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'ontouchstart'</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">window</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">minplayer.isTouchPad</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>116</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>117</span> </span></pre></body></html>
