{"action":"created","issue":{"url":"https://api.github.com/repos/CookPete/react-player/issues/76","repository_url":"https://api.github.com/repos/CookPete/react-player","labels_url":"https://api.github.com/repos/CookPete/react-player/issues/76/labels{/name}","comments_url":"https://api.github.com/repos/CookPete/react-player/issues/76/comments","events_url":"https://api.github.com/repos/CookPete/react-player/issues/76/events","html_url":"https://github.com/CookPete/react-player/issues/76","id":161234074,"number":76,"title":"About autoplay in iOS platform","user":{"login":"KevinChien","id":2231564,"avatar_url":"https://avatars.githubusercontent.com/u/2231564?v=3","gravatar_id":"","url":"https://api.github.com/users/KevinChien","html_url":"https://github.com/KevinChien","followers_url":"https://api.github.com/users/KevinChien/followers","following_url":"https://api.github.com/users/KevinChien/following{/other_user}","gists_url":"https://api.github.com/users/KevinChien/gists{/gist_id}","starred_url":"https://api.github.com/users/KevinChien/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/KevinChien/subscriptions","organizations_url":"https://api.github.com/users/KevinChien/orgs","repos_url":"https://api.github.com/users/KevinChien/repos","events_url":"https://api.github.com/users/KevinChien/events{/privacy}","received_events_url":"https://api.github.com/users/KevinChien/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-06-20T16:12:40Z","updated_at":"2016-06-21T08:13:55Z","closed_at":null,"body":"Hi CookPete,\r\n\r\nI have a problem about iOS9 with attribute 'autoplay' in html5 tag <audio>.\r\nWhen I use <ReactPlayer url={path/to/mp3} fileConfig={{autoplay: true}} />, the autoplay attribute seems not add attribute 'autoplay' to <audio>.\r\n   And iOS has limitation to block autoplay to prevent wasted bandwidth from user's quota. But we want to make a repeat function with playlist in iOS. So I try to run these code after componentDidMount:\r\n    **....\r\n    var audio = document.querySelector(\"audio\");\r\n    audio.autoplay = true;\r\n    audio.load(); //iOS9 need do this first\r\n    audio.play(); //after iOS 5.x do this to trigger audio to play URL resource.\r\n    ....**\r\n\r\nIt can work on simple sample without ReactPlayer, just use audio tag and set resource and do that steps which I run after componentDidMount. But ReactPayer cannot, because it create two audio tag in the same time. First player is SoundCloud, second is FilePlayer. I cannot select correct audio tag, because document.querySelector always only return the first target it found(not array, I don't why).\r\n\r\nSo my solution in function componentDidMount is :  \r\n    **....\r\n    var audio = document.querySelector(\"audio\");\r\n    audio.remove(); //I know this is point to <audio> which use for SoundCloud Player\r\n    audio = document.querySelector(\"audio\"); //re-select audio again, this is point to FilePlayer which I want.\r\n    audio.autoplay = true;\r\n    audio.load(); //iOS9 need do this first\r\n    audio.play(); //after iOS 5.x do this to trigger audio to play URL resource.\r\n    ....**\r\n\r\nI know this solution is not good, so I hope you can provide a method or prop for user(developer) to decide which player they really want to use only, not all player which can current URL resource.\r\n\r\n**[Here](https://github.com/CookPete/react-player/commit/158fdde54b6188c9f9ca3034e9cb5bcc3fe3ff69) is committed log that you did in 15 Dec 2015.**\r\n\r\n**You add a map to generate each player which can play url resource.\r\nMaybe you have some consideration, I really hope you can help me to solve this problem.\r\nThis library is very useful for me, so I hope it can be better than past.**\r\n\r\nThanks!\r\n\r\nRegards\r\nKevin.Chien\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/CookPete/react-player/issues/comments/227371045","html_url":"https://github.com/CookPete/react-player/issues/76#issuecomment-227371045","issue_url":"https://api.github.com/repos/CookPete/react-player/issues/76","id":227371045,"user":{"login":"CookPete","id":1926029,"avatar_url":"https://avatars.githubusercontent.com/u/1926029?v=3","gravatar_id":"","url":"https://api.github.com/users/CookPete","html_url":"https://github.com/CookPete","followers_url":"https://api.github.com/users/CookPete/followers","following_url":"https://api.github.com/users/CookPete/following{/other_user}","gists_url":"https://api.github.com/users/CookPete/gists{/gist_id}","starred_url":"https://api.github.com/users/CookPete/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CookPete/subscriptions","organizations_url":"https://api.github.com/users/CookPete/orgs","repos_url":"https://api.github.com/users/CookPete/repos","events_url":"https://api.github.com/users/CookPete/events{/privacy}","received_events_url":"https://api.github.com/users/CookPete/received_events","type":"User","site_admin":false},"created_at":"2016-06-21T08:13:55Z","updated_at":"2016-06-21T08:13:55Z","body":"Hi @KevinChien,\r\n\r\nYou can add any attribute you like to the correct `audio` tag by passing an `attributes` object into the `fileConfig` prop, like this:\r\n\r\n```js\r\n<ReactPlayer\r\n  url='file.mp3'\r\n  playing\r\n  fileConfig={{ attributes: { autoplay: true }}\r\n/>\r\n```\r\n\r\nThere is also `refs.player` exposed within `ReactPlayer` for the player that is currently active, so if you wanted to get the `<audio>` element specifically for `FilePlayer`, you could do something like:\r\n\r\n```js\r\ncomponentDidMount () {\r\n  // This assumes that `FilePlayer` is the currently active player\r\n  const audio = this.refs.reactPlayer.refs.player\r\n  audio.load()\r\n  audio.play()\r\n}\r\nrender () {\r\n  return (\r\n    <ReactPlayer\r\n      ref='reactPlayer'\r\n      url='file.mp3'\r\n      playing\r\n      fileConfig={{ attributes: { autoplay: true }}\r\n    />\r\n  )\r\n}\r\n```\r\n\r\nThat should do the trick for now. If the `load()` and `play()` hack fixes autoplay behaviour on iOS9 then perhaps it is worth sniffing the user agent and doing this by default in `ReactPlayer` on iOS devices."}}
{"actor":{"display_login":"CookPete"}}