{"id":10352,"date":"2014-10-22T05:07:31","date_gmt":"2014-10-21T18:07:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10352"},"modified":"2014-10-22T05:07:31","modified_gmt":"2014-10-21T18:07:31","slug":"video-on-web-browser-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/video-on-web-browser-primer-tutorial\/","title":{"rendered":"Video on Web Browser Primer Tutorial"},"content":{"rendered":"<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","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 video (augmenting yesterday&#8217;s Audio on Web Browser Primer &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/video-on-web-browser-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":[4,12,30,37],"tags":[760,817,858,932,997,1006,1319,1369,1416,1493],"class_list":["post-10352","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-photography","category-tutorials","tag-media","tag-mp4","tag-ogg","tag-php","tag-programming","tag-ptogramming","tag-tutorial","tag-video","tag-webm","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10352"}],"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=10352"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10352\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=10352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=10352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=10352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}