{"action":"created","issue":{"url":"https://api.github.com/repos/webcompat/web-bugs/issues/4993","repository_url":"https://api.github.com/repos/webcompat/web-bugs","labels_url":"https://api.github.com/repos/webcompat/web-bugs/issues/4993/labels{/name}","comments_url":"https://api.github.com/repos/webcompat/web-bugs/issues/4993/comments","events_url":"https://api.github.com/repos/webcompat/web-bugs/issues/4993/events","html_url":"https://github.com/webcompat/web-bugs/issues/4993","id":213074980,"number":4993,"title":"developer.android.com - video doesn't play","user":{"login":"webcompat-bot","id":8862693,"avatar_url":"https://avatars0.githubusercontent.com/u/8862693?v=3","gravatar_id":"","url":"https://api.github.com/users/webcompat-bot","html_url":"https://github.com/webcompat-bot","followers_url":"https://api.github.com/users/webcompat-bot/followers","following_url":"https://api.github.com/users/webcompat-bot/following{/other_user}","gists_url":"https://api.github.com/users/webcompat-bot/gists{/gist_id}","starred_url":"https://api.github.com/users/webcompat-bot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webcompat-bot/subscriptions","organizations_url":"https://api.github.com/users/webcompat-bot/orgs","repos_url":"https://api.github.com/users/webcompat-bot/repos","events_url":"https://api.github.com/users/webcompat-bot/events{/privacy}","received_events_url":"https://api.github.com/users/webcompat-bot/received_events","type":"User","site_admin":false},"labels":[{"id":90471196,"url":"https://api.github.com/repos/webcompat/web-bugs/labels/browser-firefox","name":"browser-firefox","color":"FF4E00","default":false},{"id":388173951,"url":"https://api.github.com/repos/webcompat/web-bugs/labels/status-needstriage","name":"status-needstriage","color":"ff9900","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-03-09T15:39:36Z","updated_at":"2017-03-09T22:02:42Z","closed_at":null,"body":"<!-- @browser: Firefox 52.0 -->\n<!-- @ua_header: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0 -->\n<!-- @reported_with: web -->\n\n**URL**: https://developer.android.com/training/constraint-layout/index.html#add-a-constraint\n**Browser / Version**: Firefox 52.0\n**Operating System**: Windows 10\n**Problem type**: Video doesn't play\n\n**Steps to Reproduce**\n1. Navigate to: https://developer.android.com/training/constraint-layout/index.html#add-a-constraint\r\n2. Press Play\r\n\r\nExpected Behavior: Click on play should play the mp4 video\r\n\r\nActual Behavior: Nothing happens. No error nothing else... \r\n\r\nEdge, Internet Explorer and Firefox cant play this.\r\nChrome has no problems.\r\n\r\n\r\n![Screenshot Description](https://webcompat.com/uploads/2017/3/49843f7b-9537-4cb4-a4c2-e9242dcc9e50.jpg)\n\n\n\n_From [webcompat.com](https://webcompat.com/) with ❤️_"},"comment":{"url":"https://api.github.com/repos/webcompat/web-bugs/issues/comments/285497926","html_url":"https://github.com/webcompat/web-bugs/issues/4993#issuecomment-285497926","issue_url":"https://api.github.com/repos/webcompat/web-bugs/issues/4993","id":285497926,"user":{"login":"adamopenweb","id":6587558,"avatar_url":"https://avatars3.githubusercontent.com/u/6587558?v=3","gravatar_id":"","url":"https://api.github.com/users/adamopenweb","html_url":"https://github.com/adamopenweb","followers_url":"https://api.github.com/users/adamopenweb/followers","following_url":"https://api.github.com/users/adamopenweb/following{/other_user}","gists_url":"https://api.github.com/users/adamopenweb/gists{/gist_id}","starred_url":"https://api.github.com/users/adamopenweb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adamopenweb/subscriptions","organizations_url":"https://api.github.com/users/adamopenweb/orgs","repos_url":"https://api.github.com/users/adamopenweb/repos","events_url":"https://api.github.com/users/adamopenweb/events{/privacy}","received_events_url":"https://api.github.com/users/adamopenweb/received_events","type":"User","site_admin":false},"created_at":"2017-03-09T22:02:42Z","updated_at":"2017-03-09T22:02:42Z","body":"Thanks for the report! I can reproduce this issue in Firefox 55 and Safari.\r\nWell it's not that Firefox can't [play the mp4 file](https://storage.googleapis.com/androiddevelopers/videos/studio/studio-constraint-first.mp4), but the website isn't actually trying to play the video.\r\n\r\nThe videos are wrapped in this 'video-wrapper' div:\r\n```html\r\n<div class=\"video-wrapper paused\">\r\n<video poster=\"/training/constraint-layout/images/thumbnail-studio-constraint-first.png\" controls=\"\" width=\"460\">\r\n  <source src=\"https://storage.googleapis.com/androiddevelopers/videos/studio/studio-constraint-first.mp4\" type=\"video/mp4\">\r\n  <img src=\"https://developer.android.com/training/constraint-layout/images/thumbnail-studio-constraint-first\" alt=\"\">\r\n</video>\r\n</div>\r\n```\r\n\r\nThere some JS in [docs.js](https://developer.android.com/static/js/docs.js?v=2017030908) that applies the 'paused' class to the video-wrapper div.\r\n\r\n```js\r\n  // Set up play-on-click for <video> tags with a \"video-wrapper\".\r\n  $('.video-wrapper').addClass('paused');\r\n  $('.video-wrapper > video').removeAttr('controls')\r\n                             .on('click', function() {\r\n    if ($(this.parentElement).hasClass('playing')) {\r\n      this.pause();\r\n      this.removeAttribute('controls')\r\n      $(this.parentElement).removeClass('playing').addClass('paused');\r\n    } else {\r\n      this.play();\r\n      this.setAttribute('controls','')\r\n      $(this.parentElement).addClass('playing').removeClass('paused')\r\n                           .removeClass('mouseover');\r\n    }\r\n  }).on('mouseover', function() {\r\n    $(this.parentElement).addClass('mouseover');\r\n  }).on('mouseout', function() {\r\n    $(this.parentElement).removeClass('mouseover');\r\n  });\r\n```\r\n\r\nIf we remove the 'paused' or 'playing' class from the 'video-wrapper' div, the video will actually play."}}
{"actor":{"display_login":"adamopenweb"}}