1

Is there a cross browser way of streaming video on smart phones, can I use the built in video players. If so what format and ratios should the video be in?

I want to do this from a mobile website, not a native app so the perfect scenario I guess is a link on a page “Watch Video” and then the video simply plays, I don’t want the user to have to install anything.

I’ve use Flash to stream video in computer browsers not sure how that will work in the future but how is done best on phones?

Is there a good tutorial around?

Cheers,

Mike

2 Answers2

0

It may depend on what devices/browsers you need to support, but the obvious thing to look at would be the HTML5 video element, especially since this is for a mobile web site and not a native app.

According to the awesome caniuse.com site, HTML5 video is fairly well-supported at this time across the major browsers and devices. http://caniuse.com/video

HTML5 Rocks has a decent HTML5 video tutorial. http://www.html5rocks.com/en/tutorials/video/basics/

Dive Into HTMl5's intro to HTML5 video is also good. http://diveintohtml5.com/video.html

Trott
  • 66,479
  • 23
  • 173
  • 212
0

Thanks Trott,

I haven’t had to stream video since the demise of Flash so I hadn’t ventured into video with HTML5 yet, that was easy! Goodbye Flash it has been a love hate relationship for a long time…lol.

Roman Nurik’s code here gave me everything I needed to get it working on a phone.

Link: HTML5 <video> element on Android

<!DOCTYPE html>
<html>
<head>
  <script>
    function init() {
      enableVideoClicks();
    }

    function enableVideoClicks() {
      var videos = document.getElementsByTagName('video') || [];
      for (var i = 0; i < videos.length; i++) {
        // TODO: use attachEvent in IE
        videos[i].addEventListener('click', function(videoNode) {
          return function() {
            videoNode.play();
          };
        }(videos[i]));
      }
    }
  </script>
</head>

<body onload="init()">
    <video src="sample.mp4" width="400" height="300" controls></video>
    ...
</body>
</html>

I had to make some modifications for MVC and Razor but perfect!

Thanks again, Mike.

Community
  • 1
  • 1