{"id":10360,"date":"2014-10-23T05:02:52","date_gmt":"2014-10-22T18:02:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10360"},"modified":"2014-10-23T05:02:52","modified_gmt":"2014-10-22T18:02:52","slug":"audio-video-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-video-primer-tutorial\/","title":{"rendered":"Audio Video Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/audio_video.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Audio Video Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/audio_video.jpg\" title=\"Audio Video Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Audio Video Primer Tutorial<\/p><\/div>\n<p>The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files.  With this in mind, today&#8217;s tutorial attempts to play audio or video or audio and video together in synchronization (augmenting yesterday&#8217;s <a target=_blank href='#vowbpt' title='Video on Web Browser Primer Tutorial'>Video on Web Browser Primer Tutorial<\/a> as shown below) across the major browsers where &#8230;<\/p>\n<ul>\n<li>the audio and\/or video plays as soon as the webpage loads &#8230; annoying if you are not informed of this, but today we really really feel like we should really really warn you &#8230; so we really think that &#8230; you should really be warned &#8230; clicking the buttons could load audio or video or both<font size=1>, really<\/font><\/li>\n<li>show controls<\/li>\n<li>loop the audio and\/or video file(s)<\/li>\n<\/ul>\n<p>&#8230; as you can see there are quite a few scenarios &#8230; let alone considering the audio and\/or video format(s) &#8230; as far as that goes, consult the w3schools <a target=_blank title='Video tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_audio.asp'>audio link<\/a> and\/or <a target=_blank title='Video tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_video.asp'>video link<\/a>.<\/p>\n<p>Along the way you may need some (online) audio and\/or video format conversion functionality, and for this we like <a target=_blank title='Audio and\/or Video conversions online' href='http:\/\/www.online-convert.com'>Audio and\/or Video conversions online<\/a> (for example).<\/p>\n<p>You may want to read more about other similar issues, which are sometimes referred to as <a target=_blank title='Wikipedia information regarding cross-browser' href='http:\/\/en.wikipedia.org\/wiki\/Cross-browser'>cross-browser<\/a> issues.<\/p>\n<p>So in this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/audio_video.jpg\">tutorial<\/a> you can imagine Internet Explorer 11 and Safari, Opera and Chrome, and see Firefox, playing an audio and\/or a video file.  Here is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/audio_video.html\">live run<\/a> link, which for its default scenario refers to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7474' title='GoToMeeting Primer Tutorial'>GoToMeeting Primer Tutorial<\/a>.<\/p>\n<p>Here is some HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/audio_video.html_GETME\" title=\"audio_video.html\">audio_video.html<\/a> supervising audio  PHP programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/audio_generic.php_GETME\" title=\"audio_generic.php\">audio_generic.php<\/a> and video  PHP programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/video_generic.php_GETME\" title=\"video_generic.php\">video_generic.php<\/a> to oversee the playing of audio or video or both, synchronized.   If there are complex cross-browser issues they can be resolved by a server-side language such as PHP (or ASP.Net) ahead of the HTML reaching the client&#8217;s web browser.<\/p>\n<hr \/>\n<p id='vowbpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10352' title='Video on Web Browser Primer Tutorial'>Video on Web Browser Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Video on Web Browser Primer Tutorial ... clicking plays video file\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/nala.jpg\" title=\"Video on Web Browser Primer Tutorial ... clicking plays video file\"  \/><\/a><p class=\"wp-caption-text\">Video on Web Browser Primer Tutorial ... clicking plays video file<\/p><\/div>\n<p>The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files.  With this in mind, today&#8217;s tutorial attempts to play video (augmenting yesterday&#8217;s <a target=_blank href='#awbpt' title='Audio on Web Browser Primer Tutorial'>Audio on Web Browser Primer Tutorial<\/a> as shown below) across the major browsers where &#8230;<\/p>\n<ul>\n<li>the video plays as soon as the webpage loads &#8230; annoying if you are not informed of this, but today we feel like we should warn you &#8230; so we think that &#8230; you should be warned &#8230; clicking the picture should load a video file<\/li>\n<li>show controls<\/li>\n<li>loop the video file<\/li>\n<\/ul>\n<p>&#8230; as you can see there are quite a few scenarios &#8230; let alone considering the video format &#8230; as far as that goes, consult this w3schools <a target=_blank title='Video tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_video.asp'>link<\/a>.<\/p>\n<p>Along the way you may need some (online) video format conversion functionality, and for this we like <a target=_blank title='M4V to WEBM online' href='http:\/\/www.online-convert.com'>M4V to OGG conversions online<\/a> (for example).<\/p>\n<p>Where can you source some video files? &#8230; We (probably all) like <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> for this,  particularly as you get great help with their wonderful advice on how to embed the video into your own HTML.<\/p>\n<p>You may want to read more about other similar issues, which are sometimes referred to as <a target=_blank title='Wikipedia information regarding cross-browser' href='http:\/\/en.wikipedia.org\/wiki\/Cross-browser'>cross-browser<\/a> issues.<\/p>\n<p>So in this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/nala.jpg\">tutorial<\/a> you can imagine Internet Explorer 11 and see Firefox, Safari, Opera and Chrome playing a video file.  Here is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php\">live run<\/a> link.<\/p>\n<p>Here is some PHP programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/nala.php_GETME\" title=\"nala.php\">nala.php<\/a> to play this video of Nala the dog playing Hide and Seek (one of her favourite games).   If there are complex cross-browser issues they can be resolved by a server-side language such as PHP (or ASP.Net) ahead of the HTML reaching the client&#8217;s web browser.<\/p>\n<hr \/>\n<p id='awbpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10336' title='Audio on Web Browser Primer Tutorial'>Audio on Web Browser Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Audio on Web Browser Primer Tutorial ... clicking plays audio file\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.jpg\" title=\"Audio on Web Browser Primer Tutorial ... clicking plays audio file\"  \/><\/a><p class=\"wp-caption-text\">Audio on Web Browser Primer Tutorial ... clicking plays audio file<\/p><\/div>\n<p>The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files.  With this in mind, today&#8217;s tutorial attempts to play audio across the major browsers where &#8230;<\/p>\n<ul>\n<li>the audio plays as soon as the webpage loads &#8230; annoying if you are not informed of this, but today we warn you &#8230; so &#8230; be warned &#8230; clicking the picture should load an audio file<\/li>\n<li>show controls<\/li>\n<li>loop the audio file<\/li>\n<\/ul>\n<p>&#8230; as you can see there are quite a few scenarios &#8230; let alone considering the audio format &#8230; as far as that goes, consult this w3schools <a target=_blank title='Audio tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_audio.asp'>link<\/a>.<\/p>\n<p>Along the way you may need some (online) audio format conversion functionality, and for this we like <a target=_blank title='MP3 to OGG online' href='http:\/\/www.online-convert.com'>MP3 to OGG conversions online<\/a> (for example).<\/p>\n<p>Where can you source some audio files? &#8230; We like <a target=_blank title='Sound Bible online audio file repository' href='http:\/\/soundbible.com'>Sound Bible<\/a> for this, sometimes, as for our wind sound today, also used with <a target=_blank title='Battleships and Cruisers game' href='http:\/\/www.rjmprogramming.com.au\/Games\/Battleshipsandcruisers\/index.php?isMobile=n'>Battleships and Cruisers<\/a> game here at this domain.<\/p>\n<p>You may want to read more about other similar issues, which are sometimes referred to as <a target=_blank title='Wikipedia information regarding cross-browser' href='http:\/\/en.wikipedia.org\/wiki\/Cross-browser'>cross-browser<\/a> issues.<\/p>\n<p>So in this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.jpg\">tutorial<\/a> you can imagine Internet Explorer 11 and see Firefox, Safari, Opera and Chrome playing an audio file.  Here is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.php\">live run<\/a> link.<\/p>\n<p>Here is some PHP programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/wind.php_GETME\" title=\"wind.php\">wind.php<\/a> to play this wind sound audio file.   If there are complex cross-browser issues they can be resolved by a server-side language such as PHP (or ASP.Net) ahead of the HTML reaching the client&#8217;s web browser.<\/p>\n<p>We&#8217;ve used some of these audio techniques, too, with ESL (teaching) as below:<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1154' title='A Media Job for Listening Task Class webpage Tutorial'>A Media Job for Listening Task Class webpage Tutorial<\/a> explains in some detail the making of ESL listening task <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1152' title='English Learning \u2013 Listening Class \u2013 Tapioca Five Ways'>English Learning \u2013 Listening Class \u2013 Tapioca Five Ways<\/a><\/li>\n<li>ESL listening task <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=2608' title='English Learning \u2013 Listening Class \u2013 Love at First Bite'>English Learning \u2013 Listening Class \u2013 Love at First Bite<\/a><\/li>\n<li><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=683' title='English Phonics Learning Ideas'>English Phonics Learning Ideas<\/a><\/li>\n<\/ul>\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='#d10336' onclick='var dv=document.getElementById(\"d10336\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10336' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\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='#d10352' onclick='var dv=document.getElementById(\"d10352\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10352' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\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='#d10360' onclick='var dv=document.getElementById(\"d10360\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=media\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10360' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The major web browsers on a Mac laptop or Windows laptop have differences in rendering and methods by which they play media files. With this in mind, today&#8217;s tutorial attempts to play audio or video or audio and video together &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-video-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":[12,37],"tags":[113,576,652,760,932,997,1319,1369],"class_list":["post-10360","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-audio","tag-html","tag-javascript","tag-media","tag-php","tag-programming","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10360"}],"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=10360"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10360\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=10360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=10360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=10360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}