Videos not working on phones using HTML

Question

I realize a web page the index reproduce a video list. In pc works fine, but when I see it in a phone/mobile device, the videos don't reproduce.

The code below is the script for the video:

<script>
    video_count = 1;
    videoPlayer = document.getElementById("homevideo");

    function run() {
        video_count++;
        if (video_count == 5)
            video_count = 1;

        var nextVideo = "video" + video_count + ".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
    };
</script>

In this part I define the video list.

<video  preload="auto" id="idle_video" onended="onVideoEnded();" class="fullscreen-bg__video" ></video>
<script>
    var video_list = [ "vid/video1.mp4", "vid/video2.mp4", "vid/video3.mp4", "vid/video4.mp4" ];
    var video_index = 0;
    var video_player = null;

    function onload() {
        console.log("body loaded");
        video_player = document.getElementById("idle_video");
        video_player.setAttribute("src", video_list[video_index]);
        video_player.play();
        var vid = document.getElementById("idle_video");
        vid.volume = 1;
    }

    function onVideoEnded() {
        console.log("video ended");
        if (video_index < video_list.length - 1) {
            video_index++;
        }
        else {
            video_index = 0;
        }
        video_player.setAttribute("src", video_list[video_index]);
        video_player.setAttribute("type='video/mp4; codecs='avc1.42E01E, mp4a.40.2'");
        video_player.play();
    }
</script>

Answer 1

Given your description of the problem it sounds like the video format is not supported on the phones you are trying it on.

I think you are using an mp4 video on Android so one thing to check is the profile - some devices will only support mp4 baseline profile. Full Android media support is included here:

• http://developer.android.com/guide/appendix/media-formats.html

As a general rule mp4 is supported, but mp4 is only a 'container' and there may be a codec used within the container, for video or audio, which is not supported.

If what you are asking how you can convert your video to the required formats then you can do it your self using ffmpeg (https://www.ffmpeg.org - have a look at the 'Video and Audio file format conversion' section in the online documentation) or you can use one of the cloud or app based services such as:

• http://easyhtml5video.com (appears to be free for non-commercial - I have not used it personally)

One additional comment - your explicitly list the codecs in your Javascript above. This is not usually necessary for HTML5 mp4 video playback. I would try removing that just in case the Android player or browsers are to accepting the video based on this extra information.

And finally, the following site is a useful reference for HTML5 markup that should play videos across as wide a device and browser combination as possible:

• http://v4e.thewikies.com

And finally, finally ... online video formats and device/browser support changes all the time so it is really worth checking sites like the ones above to ensure you have the latest picture when implementing or updating a site or app.