{"id":28696,"date":"2017-03-07T03:01:56","date_gmt":"2017-03-06T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28696"},"modified":"2017-03-07T09:20:24","modified_gmt":"2017-03-06T23:20:24","slug":"audiovideo-html5-form-input-capture-via-php-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/audiovideo-html5-form-input-capture-via-php-primer-tutorial\/","title":{"rendered":"Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/upload_audio.jpg\" title=\"Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve spoken before about the wonderful HTML5, and its capabilities to upload audio and\/or videos to a web server (or, with Share functionalities onto public repositories like <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a>, should you wish).<\/p>\n<p>The key attributes to an HTML input element, as outlined at this W3C <a target=_blank title='W3C Media Capture' href='https:\/\/www.w3.org\/TR\/html-media-capture\/'>Media Capture<\/a> link, to be able, on many smart phones and tablets, to capture that audio and\/or video input are &#8230;<\/p>\n<ul>\n<li>accept<\/li>\n<li>capture<\/li>\n<\/ul>\n<p> &#8230; as per &#8230;<\/p>\n<blockquote cite=\"https:\/\/www.w3.org\/TR\/html-media-capture\/\"><p>\n The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device&#8217;s environment using a media capture mechanism is preferred.<\/p>\n<p>The capture IDL attribute MUST reflect the respective content attribute of the same name.<\/p>\n<p>When the capture attribute is specified, the user agent SHOULD invoke a file picker of the specific capture control type.<\/p>\n<p>If the accept attribute&#8217;s value is set to a MIME type that has no associated capture control type, the user agent MUST act as if there was no capture attribute.\n<\/p><\/blockquote>\n<p> &#8230; as we use in our PHP code snippet &#8230;<\/p>\n<p><code><br \/>\n&lt;input onclick=\" document.getElementById('submit').style.display='block';  \"<br \/>\n           style=\"font-size:26px;height:60px;background-color: yellow;\"<br \/>\n           type=\"file\" name=\"upload\" <b>accept=\"audio\/*\" capture<\/b>&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p>And so we present this in an early days PHP web application that will only function for very short audio\/video captures, but testable on iOS iPhones or iPads and we think it will also work on Android mobile devices, as long as the captures are short.  So far, its functionality just goes towards uploading your work to our web server and playing it back to you.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/ilLrFrtjEaw\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>The PHP <a target=_blank title='Click picture' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php\">live run<\/a> link is associated with PHP code you could call <a target=_blank title='upload_audio.php' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php_GETME\">upload_audio.php<\/a> and download, as you wish.<\/p>\n<p>We hope this is more food for thought for you.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d28696' onclick='var dv=document.getElementById(\"d28696\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/upload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28696' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve spoken before about the wonderful HTML5, and its capabilities to upload audio and\/or videos to a web server (or, with Share functionalities onto public repositories like YouTube, should you wish). The key attributes to an HTML input element, as &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/audiovideo-html5-form-input-capture-via-php-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12,20,37],"tags":[76,113,2150,322,452,576,578,609,626,760,795,1969,932,997,1319,1343,1369,1395,1493],"class_list":["post-28696","post","type-post","status-publish","format-standard","hentry","category-android","category-elearning","category-ios","category-tutorials","tag-android","tag-audio","tag-capture","tag-device","tag-form","tag-html","tag-html5","tag-input","tag-ios","tag-media","tag-mobile","tag-mobile-device","tag-php","tag-programming","tag-tutorial","tag-upload","tag-video","tag-w3c","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28696"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=28696"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28696\/revisions"}],"predecessor-version":[{"id":28714,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28696\/revisions\/28714"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=28696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=28696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=28696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}