发表新帖
发表新帖

Embed video in web page (HTML)

后端 未结
关注
6 468
一生所求
一生所求 2021-01-02 16:54

I want embed a video in a webpage.
I don\'t want to use flash because it\'s unavailable for a huge number of platforms.
I\'m reluctant to use HTML5 becase it\'s not

6条回答
  • 傲寒
    傲寒 (楼主)
    2021-01-02 17:38

    I worked on this problem as I'm very interested in xHtml+RDFa and I found a way to play a video in an xHtml 1.0 strict document on HTML5 browsers without blocking not HTML5 browsers.

    I published a jQuery plugin here: https://github.com/charlycoste/xhtml-video

    And a demo here: http://demo.ccoste.fr/video

    Actually, this is quite less powerfull than using a HTML5 tag, but at least... it works!

    The solution relies on javascript and canvas but can be gracefully degraded by using tags (that's what my jQuery plugin does).

    What I do is actually simple:

    1. I create a new video element (not a tag) in memory but I don't add it to the DOM document:

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

    2. I create a new canvas element in memory but I don't add it to the DOM document:

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

    3. I create a new img element and I add it to the DOM.

      // var parent = ... ;
// var width = ...;
// var height = ...;
var img = document.createElement('img');

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

    4. When video is playing (video.play()), I make it draw each frame in the canvas (which is not visible, because not added to the DOM - which makes the DOM stay valid xhtml 1.0 document)

      canvas.getContext("2d").drawImage(video, 0, 0, width, height);

    5. Finally I use the toDataURL() method of the canvas element to get a base64 encoded image for the frame and put it to the src attribute of the img element.

      img.setAttribute('src', canvas.toDataURL());

    By doing this, you make javascript objects play a video out of the DOM and push each frame in an img DOM element. So you can play the video by using HTML5 capabilities of the browser, but with no need of a HTML5 document.

    And if the browser has no HTML5 capabilities or if it can't handle the used codec, it will fall back on the native behaviour (in general... the browser will look for a plugin like VLC, or so on...)

    And if there is no way for playing the video (no plugin for it), the alternative content provided inside the tag will be used.

    Performance aspect: as it results in a very high consuming process, the playback may flicker... To avoid this, you can decrease rendering quality by using jpeg compression this way : canvas.toDataURL('image/jpeg', quality) where quality is a value between 0 and 1.

    0 讨论(0)
     看不清?
    提交回复
    热议问题