Change script to show video in Html5

Asked

Viewed 495 times

4

How do I make this script shows an HTML5 video instead of Flash Player? My script looks like this:

In this script he injects the video link into the flash player, I would like to replace this with an HTML5 of the type <video class="" width="100%" controls preload="auto" autoplay poster="" src=" "></video>


<script type="text/javascript">
    // Which flash versions are needed for given format
    var FLASH_VERSIONS = {
        '7/0/0': [5],
        '9/0/115': [18, 22, 33, 34, 35, 37, 38, 59, 78, 82, 83, 84, 85, 120, 121],
    }

    var ts = Math.round((new Date()).getTime() / 1000);
</script>

1 answer

3

Search for tutorials that teach how to run videos in HTML 5.

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Seu navegador não suporta o elemento <code>video</code>.
</video>

Example by clicking a button to play a video:

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

I did not pass how to create with Javascript a video player, but anything of a append of a type element video and handle it with Javascript.

References (I hope these links will be useful to you):

http://www.w3schools.com/tags/ref_av_dom.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Using_HTML5_audio_and_video http://www.w3schools.com/tags/tag_video.asp http://www.w3schools.com/html/html5_video.asp

EDIT

function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');

    source.src = src;
    source.type = type;

    element.appendChild(source);
}

var video = document.createElement('video');

document.body.appendChild(video);

addSourceToVideo(video, 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv', 'video/ogg');

video.play();
  • But how do you add the append to this script?

  • I wanted to replace the code that calls the flash to one that calls the Html5

  • I edited the answer as you asked, I hope it helps.

  • Use this api: http://www.videojs.com/. Remember to convert your videos to the given format, or you will not scroll.

  • documentation: https://github.com/videojs/video.js/blob/stable/docs/index.md

  • Sorry the script I posted was missing a part that searches the video source at the end of the code, could look again?

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.