Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26638 > unrolled thread

test for autoplay

Back to article view | Back to comp.lang.javascript

Contents

  test for autoplay Andrew Poulos <ap_prog@hotmail.com> - 2015-01-22 07:55 +1100
    Re: test for autoplay Scott Sauyet <scott.sauyet@gmail.com> - 2015-01-21 13:17 -0800
      Re: test for autoplay Andrew Poulos <ap_prog@hotmail.com> - 2015-01-22 08:42 +1100
    Re: test for autoplay Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-21 23:03 +0100
      Re: test for autoplay "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-01-21 23:35 +0100
        Re: test for autoplay Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-01-22 01:10 +0100
          Re: test for autoplay "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-01-22 14:14 +0100

#26638 — test for autoplay

iOS, for one, will not allow video to autoplay. The client would like 
the elearning I'm developing to autoplay video. If a device cannot 
autoplay then they want an instruction to appear that says something 
like "Select Play to watch the video". So I need to be able to detect is 
autoplay is possible.

I found this that looked worth trying

var AUTOPLAY = false;

(function() {
   var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];

   try {
     var audio = new Audio();
     audio.autoplay = true;

     $(audio).on('play', function() {
       AUTOPLAY = true;
     });

     audio.src = mp3;
   } catch(e) {
     // error
   }
})();

Alas I don't understand "$(audio).on('play', function() {"

What is it doing?

Andrew Poulos

[toc] | [next] | [standalone]

#26639

Andrew Poulos wrote:

> [ ... detecting autoplay ... ]
> I found this that looked worth trying

Found where?  Were there no further instructions?

> var AUTOPLAY = false;
> 
> (function() {
>    var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];
> 
>    try {
>      var audio = new Audio();
>      audio.autoplay = true;
> 
>      $(audio).on('play', function() {
>        AUTOPLAY = true;
>      });
> // [ ... several lines elided... ]
> })();
> 
> Alas I don't understand "$(audio).on('play', function() {"
> 
> What is it doing?

Well clearly the `$` function accepts the `audio` object and returns
an object with a property `on` mapped to a binary function:

    on :: String -> Function -> void?

Presumably that object listens for events emitted by the `audio`
object and calls the callback function supplied.  It's unclear if
that function is supplied any parameters and this instance just
doesn't bother listening for them.  Nor is it clear if it would
do anything with the result of that callback function if the 
function actually returned something.

I know that jQuery [1], which is traditionally aliased as `$`, 
supplies such an `on` function on its wrapped objects. [2]  I also 
believe that it has some facility for handling custom events.  So
my suspicion is that the `$` in that sample is meant to be jQuery,
and that it is connected through its custom events mechanism to
the `play` event of the `Audio` constructor described.

But it's only a guess.


  [1]: http://jquery.com/
  [2]: http://api.jquery.com/on/


  -- Scott 

[toc] | [prev] | [next] | [standalone]

#26640

On 22/01/2015 8:17 AM, Scott Sauyet wrote:
> Andrew Poulos wrote:
>
>> [ ... detecting autoplay ... ]
>> I found this that looked worth trying
>
> Found where?  Were there no further instructions?
>
>> var AUTOPLAY = false;
>>
>> (function() {
>>     var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];
>>
>>     try {
>>       var audio = new Audio();
>>       audio.autoplay = true;
>>
>>       $(audio).on('play', function() {
>>         AUTOPLAY = true;
>>       });
>> // [ ... several lines elided... ]
>> })();
>>
>> Alas I don't understand "$(audio).on('play', function() {"
>>
>> What is it doing?
>
> Well clearly the `$` function accepts the `audio` object and returns
> an object with a property `on` mapped to a binary function:
>
>      on :: String -> Function -> void?
>
> Presumably that object listens for events emitted by the `audio`
> object and calls the callback function supplied.  It's unclear if
> that function is supplied any parameters and this instance just
> doesn't bother listening for them.  Nor is it clear if it would
> do anything with the result of that callback function if the
> function actually returned something.
>
> I know that jQuery [1], which is traditionally aliased as `$`,
> supplies such an `on` function on its wrapped objects. [2]  I also
> believe that it has some facility for handling custom events.  So
> my suspicion is that the `$` in that sample is meant to be jQuery,
> and that it is connected through its custom events mechanism to
> the `play` event of the `Audio` constructor described.
>
> But it's only a guess.
>
>
>    [1]: http://jquery.com/
>    [2]: http://api.jquery.com/on/

I searched and found other instances of the above code and found the 
"original" at <https://gist.github.com/aaronkahlhamer/8324653>

Anyhow I'm going to test replacing the jq bit with

audio.addEventListener('play', function () {
   AUTOPLAY = true;
});

Thanks
Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#26641

Andrew Poulos wrote:

> I found this that looked worth trying
> 
> var AUTOPLAY = false;
> 
> (function() {
>    var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];
> 
>    try {
>      var audio = new Audio();
>      audio.autoplay = true;
> 
>      $(audio).on('play', function() {
>        AUTOPLAY = true;
>      });
> 
>      audio.src = mp3;
>    } catch(e) {
>      // error
>    }
> })();
> 
> Alas I don't understand "$(audio).on('play', function() {"
> 
> What is it doing?

This is the jQuery way of adding an event listener for the “play” event to 
the element referred to by “audio”.  Apparently the standards-compliant

  audio.onplay = function () {
    AUTOPLAY = true;
  };

was too hard for them :->

This code creates an “audio” element in memory (using a proprietary 
approach; the standards-compliant approach would be 
“document.createElement("audio")”) and sets its “autoplay” property, thereby 
the “autoplay” attribute of the corresponding element, to “true”.  The 
assumption is that if autoplay is supported, the “play” event is fired 
immediately after the “src” property was assigned to, thereby the “src” 
attribute was set, to refer to an MPEG-1/2 Audio Layer Ⅲ (mp3) resource by 
“data:” URI.  In that case, the value of the global “AUTOPLAY” variable 
(both misguided and misplaced) is set to “true”.

This approach may or may not work as it may or may not be based on flawed 
logic.  One issue of several is that a decoder for mp3 may not be installed 
in a browser on a mobile device.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26642

Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
> 
>>      $(audio).on('play', function() {
>>        AUTOPLAY = true;
>>      });
>>
>> Alas I don't understand "$(audio).on('play', function() {"
>>
>> What is it doing?
> 
> This is the jQuery way of adding an event listener for the “play” event to 
> the element referred to by “audio”.  Apparently the standards-compliant
> 
>   audio.onplay = function () {
>     AUTOPLAY = true;
>   };
> 
> was too hard for them :->

I had only found the onplay property of the MediaController
interface[1], but have not been able to verify that the HTMLAudioElement
interface is supposed to inherit MediaController.  Where is that specified?

> This code creates an “audio” element in memory (using a proprietary 
> approach; the standards-compliant approach would be 
> “document.createElement("audio")”) 

It seems to me the Audio constructor is specified in the W3C HTML5
Recommendation.[2]

[1]
<http://www.w3.org/TR/html5/embedded-content-0.html#handler-mediacontroller-onplay>
[2] <http://www.w3.org/TR/html5/embedded-content-0.html#dom-audio>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#26644

Christoph M. Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> […] I don't understand "$(audio).on('play', function() {"
>>>
>>> What is it doing?
>> 
>> This is the jQuery way of adding an event listener for the “play” event
>> to the element referred to by “audio”.  Apparently the standards-
>> compliant
>> 
>>   audio.onplay = function () {
>>     AUTOPLAY = true;
>>   };
>> 
>> was too hard for them :->
> 
> I had only found the onplay property of the MediaController
> interface[1], but have not been able to verify that the HTMLAudioElement
> interface is supposed to inherit MediaController.  Where is that
> specified?

GlobalEventHandlers which is implemented by HTMLElement which is inherited 
by HTMLMediaElement which is inherited by HTMLAudioElement.

>> This code creates an “audio” element in memory (using a proprietary
>> approach; the standards-compliant approach would be
>> “document.createElement("audio")”)
> 
> It seems to me the Audio constructor is specified in the W3C HTML5
> Recommendation.[2]

I stand corrected.

> […]
> [2] <http://www.w3.org/TR/html5/embedded-content-0.html#dom-audio>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26649

Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
> 
>> Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> […] I don't understand "$(audio).on('play', function() {"
>>>>
>>>> What is it doing?
>>>
>>> This is the jQuery way of adding an event listener for the “play” event
>>> to the element referred to by “audio”.  Apparently the standards-
>>> compliant
>>>
>>>   audio.onplay = function () {
>>>     AUTOPLAY = true;
>>>   };
>>>
>>> was too hard for them :->
>>
>> I had only found the onplay property of the MediaController
>> interface[1], but have not been able to verify that the HTMLAudioElement
>> interface is supposed to inherit MediaController.  Where is that
>> specified?
> 
> GlobalEventHandlers which is implemented by HTMLElement which is inherited 
> by HTMLMediaElement which is inherited by HTMLAudioElement.

Thanks.

-- 
Christoph M. Becker

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web