{"action":"opened","issue":{"url":"https://api.github.com/repos/vimeo/player.js/issues/31","repository_url":"https://api.github.com/repos/vimeo/player.js","labels_url":"https://api.github.com/repos/vimeo/player.js/issues/31/labels{/name}","comments_url":"https://api.github.com/repos/vimeo/player.js/issues/31/comments","events_url":"https://api.github.com/repos/vimeo/player.js/issues/31/events","html_url":"https://github.com/vimeo/player.js/issues/31","id":167237727,"number":31,"title":"Instantiate and call player.play() on touch devices","user":{"login":"dmnsgn","id":1636460,"avatar_url":"https://avatars.githubusercontent.com/u/1636460?v=3","gravatar_id":"","url":"https://api.github.com/users/dmnsgn","html_url":"https://github.com/dmnsgn","followers_url":"https://api.github.com/users/dmnsgn/followers","following_url":"https://api.github.com/users/dmnsgn/following{/other_user}","gists_url":"https://api.github.com/users/dmnsgn/gists{/gist_id}","starred_url":"https://api.github.com/users/dmnsgn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmnsgn/subscriptions","organizations_url":"https://api.github.com/users/dmnsgn/orgs","repos_url":"https://api.github.com/users/dmnsgn/repos","events_url":"https://api.github.com/users/dmnsgn/events{/privacy}","received_events_url":"https://api.github.com/users/dmnsgn/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-07-24T15:07:07Z","updated_at":"2016-07-24T15:07:07Z","closed_at":null,"body":"### Expected Behavior\r\nInstantiate a `Vimeo.Player` and call `.play()` inside a `touchstart` handler (user gesture) should play the video on touch devices:\r\n```javascript\r\nvar options = {\r\n  id: 59777392\r\n};\r\n\r\nvar showVideo = function() {\r\n\tvar player = new Vimeo.Player('player', options);\r\n  \r\n  player.on('play', function() {\r\n    console.log('played the video!');\r\n  });\r\n  \r\n  player.play();\r\n};\r\n\r\ndocument.querySelector('#play').addEventListener('touchstart', showVideo);\r\n```\r\n\r\n### Actual Behavior\r\nVideo does not play (hides the poster/title and show loading indicator though) and console output these warnings/errors:\r\n```\r\nplayer.js:8 Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.\r\nplayer.js:14 'HTMLVideoElement.webkitSupportsFullscreen' is deprecated. Please use 'Document.fullscreenEnabled' instead.\r\nplayer.js:8 Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.\r\nplayer.js:13 'HTMLVideoElement.webkitEnterFullscreen()' is deprecated. Please use 'Element.requestFullscreen()' instead.\r\n```\r\nwhich suggest that you try to play a video without any user interaction.\r\n\r\n### Steps to Reproduce\r\nTested on a Nexus 5 Android 6.0.1 on Chrome 51:\r\n- Open https://jsfiddle.net/dmnsgn/yuqndu4f/1/ on a touch device\r\n- Touch 'Play the video' button\r\n- See poster/title fade to the black frame of the video not playing\r\n\r\nThis [stackoverflow answer](http://stackoverflow.com/a/32571967/1527470] related to a similar issue with audio) suggest that \"even after a user gesture (such as click) it waits for 1000ms and if no sound was played it throws the exception above.\"\r\nPerhaps a Promise is taking too long to resolve?"}}
{"actor":{"display_login":"dmnsgn"}}