Skip to content
This repository has been archived by the owner. It is now read-only.

phantomjs doesn't support html5 video tag #10839

Closed
ariya opened this Issue Oct 25, 2012 · 28 comments

Comments

Projects
None yet
@ariya
Copy link
Owner

ariya commented Oct 25, 2012

benjamin...@gmail.com 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.
🌟   2 people had starred this issue at the time of migration.

@ariya

This comment has been minimized.

Copy link
Owner Author

ariya commented Oct 25, 2012

ariya.hi...@gmail.com 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

@ariya ariya closed this Oct 25, 2012

@andyearnshaw

This comment has been minimized.

Copy link

andyearnshaw commented Nov 13, 2014

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

This comment has been minimized.

Copy link

bekicot commented Feb 16, 2015

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

This comment has been minimized.

Copy link

andyearnshaw commented Feb 16, 2015

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

This comment has been minimized.

Copy link

joelhandwell commented Oct 8, 2015

Is there any update?

jlchereau added a commit to kidoju/Kidoju-Widgets that referenced this issue Oct 30, 2015

@wernight

This comment has been minimized.

Copy link

wernight commented Oct 31, 2015

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

@orporan

This comment has been minimized.

Copy link

orporan commented Dec 29, 2015

Any news on this?

@Vitallium

This comment has been minimized.

Copy link
Collaborator

Vitallium commented Dec 29, 2015

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

@listen-lavender

This comment has been minimized.

Copy link

listen-lavender commented Jan 8, 2016

does it support html5 video tag now?

@Vitallium

This comment has been minimized.

Copy link
Collaborator

Vitallium commented Jan 8, 2016

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

@steverob

This comment has been minimized.

Copy link

steverob commented Apr 10, 2016

Would like this to be working though :)

@orsonteodoro

This comment has been minimized.

Copy link

orsonteodoro commented Dec 4, 2016

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

@shmdhussain

This comment has been minimized.

Copy link

shmdhussain commented Dec 7, 2016

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

This comment has been minimized.

Copy link

Rimander commented Dec 7, 2016

@shmdhussain
Can you paste the code?

@shmdhussain

This comment has been minimized.

Copy link

shmdhussain commented Dec 7, 2016

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

This comment has been minimized.

Copy link

RebOOter commented Dec 9, 2016

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

This comment has been minimized.

Copy link

jahrock commented Dec 24, 2016

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

This comment has been minimized.

Copy link

umokk commented Jun 28, 2017

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

This comment has been minimized.

Copy link

victorhazbun commented Jun 30, 2017

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

@umokk

This comment has been minimized.

Copy link

umokk commented Jul 2, 2017

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

This comment has been minimized.

Copy link

matteoraggi commented Jul 23, 2017

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

@umokk

This comment has been minimized.

Copy link

umokk commented Jul 27, 2017

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

This comment has been minimized.

Copy link

matteoraggi commented Jul 29, 2017

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

This comment has been minimized.

Copy link

umokk commented Jul 29, 2017

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

This comment has been minimized.

Copy link

Musikar commented Sep 15, 2017

document.querySelector('video').innerHTML

returns

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

This comment has been minimized.

Copy link

SeNaP commented Sep 20, 2017

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

@DroneZzZko

This comment has been minimized.

Copy link

DroneZzZko commented Sep 22, 2017

@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

This comment has been minimized.

Copy link

SeNaP commented Sep 22, 2017

@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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.