phantomjs doesn't support html5 video tag

[ariya]

_[email protected] commented:_

With Phantomjs 1.7.0 binary (on windows or linux)

What steps will reproduce the problem?

1. try to open a webpage with video tag (http://www.808.dk/?code-html-5-video)
2. do a render of the webpage (page.render('html5-video.png');
3. open the png file

What is the expected output? you should see the first image of the video after the HTML 5 video h3 tag.

What do you see instead? it displays alternative text : Video not playing ? ...

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #839.
:star2:   2 people had starred this issue at the time of migration.

[ariya]

_[email protected] commented:_

Media (audio and video) won't be support by PhantomJS in the near future. For more explanation, search the mailing-list.

 
_Metadata Updates_

• Status updated: WontFix

[andyearnshaw]

Why not at least implement HTMLMediaElement, HTMLAudioElement and HTMLVideoElement, but have canPlayType always return false and playback-related APIs dispatch an error event? At least then developers won't have to implement checks for instance methods just to satisfy PhantomJS.

[bekicot]

PhantomJs 2 Is out, can anyone confirm that this is work in phantomjs 2 ?
I'm using ubuntu. currently, it has no binary support for ubuntu.

[andyearnshaw]

Nope, still doesn't work in PhantomJS2.

@ariya, do you have any thoughts on at least implementing the required interfaces _without_ supporting any codecs?

[joelhandwell]

Is there any update?

[wernight]

During the build, it seems to be looking for certain packages in order to support, or not, videos.

[orporan]

Any news on this?

[vitallium]

This feature will not be implemented, likely, in near future.

[listen-lavender]

does it support html5 video tag now?

[vitallium]

@listen-lavender not, it doesn't. Please see my answer above.

[steverob]

Would like this to be working though :)

[orsonteodoro]

Is this why my $('video').attr('src') is undefined? I can't scrape it.

[shmdhussain]

video element is added but properties of the tags are undefined. I just mimicked the functions play and pause on the video element. It is working now.

[Rimander]

@shmdhussain
Can you paste the code?

[shmdhussain]

var videoArray = [];
$("body").find('video').each(function(index, video) {
    var videoId = $(video).attr('id').replace("my-video-", "");
    videoArray.push({});
    video.play = (function() {
        var videoIdClosure = videoId;
        return function() {
            videoArray[videoIdClosure].isPlayed = true;
        }
    })();
    video.pause = (function() {
        var videoIdClosure = videoId;
        return function() {
            videoArray[videoIdClosure].isPaused = true;
        }
    })();
});

[RebOOter]

Any hope that PhantomJS will support video? Sometimes we can have elements (buttons, fields and others) over the video tag and we can't get access to elements

[jahrock]

I found this ticket a few days ago and was thinking a lot about this issue.
From my opinion it's ok to leave out the full html5 video player support in PhantomJS.

Would it make sence to handle video containers with existing poster attribute as images?
So we could at least see the Poster as in my usecase would be exact the same output as the user get in his browser.

My wanted usecase input
<video poster="/video/poster-name.png">
<source type="video/mp4" src="/video/video-name.mp4">
</video>

My wanted usecase output (skip full video support, but handle poster url as image source)
<img src="/video/poster-name.png">

What thinks the PhantomJS core team about this?

Regards

[umokk]

I was able to build a PhantomJS with video and audio tags support. Actually, you just need to enable video and audio tags support when building your WebKit.

[victorhazbun]

@umokk how you did it? Can you please tell me step by step?

[umokk]

The media tags (audio and video) support depends entirely on WebKit, not on PhantomJS. So to enable it you have to turn on appropriate features of your WebKit (ENABLE_VIDEO, ENABLE_WEB_AUDIO) when you build it.

[matteoraggi]

Great answer! Could you please give me more details about how to build webkit enabling video on linux?

[umokk]

You may find all the details about configuring WebKit in its config and readme files. They will explain this process way better than I could do it.
I made such a build of phantomjs (with video tag support) for my customer, but unfortunately they didn't buy it. They don't need it any more.

[matteoraggi]

I downloaded the source of webkit from https://github.com/WebKit/webkit , inside it I was reading the radme.md file but it is not clear to me how to behave then to enable the video compiling the source.
Searching in the source file names I can find more of 100 times the word VIDEO.., so huge quantity make me hard to know where to watch.
Here I found enable and disable video: https://github.com/adobe/webkit/blob/master/Source/cmake/OptionsEfl.cmake
Maybe the main problem is that the readme don't tells me where is the config file?
what about if I skip the problem and move on https://slimerjs.org/ ?

[umokk]

Yes, ENABLE_VIDEO and ENABLE_WEB_AUDIO in Options(Elf|GTK).cmake are essential to make Webkit support video and audio tags. So, you turn them on and build WebKit.
I didn't pay much attention to other headless web browsers because my customer used PhantomJS and they wanted this particular headless web browser to be HTML5 compatible.

[Musikar]

document.querySelector('video').innerHTML

returns

<source type="video/mp4" src="" />

[SeNaP]

@matteoraggi, You succeeded for build phantomjs with video and audio supported ?

[DroneZzZko]

@victorhazbun @matteoraggi @SeNaP to build phantomjs with video/audio support:
For building I used Ubuntu 14.04 Vagrant Box

1. Follow the instruction Getting the Code
2. Remove build options from buildQtWebKit function in build.py:

Before:

configureOptions = [
    # disable some webkit features we do not need
    "WEBKIT_CONFIG-=build_webkit2",
    "WEBKIT_CONFIG-=netscape_plugin_api",
    "WEBKIT_CONFIG-=use_gstreamer",
    "WEBKIT_CONFIG-=use_gstreamer010",
    "WEBKIT_CONFIG-=use_native_fullscreen_video",
    "WEBKIT_CONFIG-=video",
    "WEBKIT_CONFIG-=web_audio",
]

After:

configureOptions = [
    # disable some webkit features we do not need
    "WEBKIT_CONFIG-=build_webkit2",
    "WEBKIT_CONFIG-=netscape_plugin_api"
 ]

1. Follow the instruction Compile and Link to build phantomjs

[SeNaP]

@DroneZzZko thanks! Now my build phantomjs supports video & audio ( tested on a htm5test.com site ) , but i can't play video or audio through HTML5 player. Your it can?