Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

show() not showing video with video tag display: none #1680

Closed
ds00424 opened this issue Nov 20, 2014 · 10 comments
Closed

show() not showing video with video tag display: none #1680

ds00424 opened this issue Nov 20, 2014 · 10 comments
Labels
duplicate

Comments

@ds00424
Copy link

ds00424 commented Nov 20, 2014

Detailed description of what you did, along with a link to your reduced test case.
video tag has style display: none
load mp4
loaddata event triggered
this.show() does not show the video.

Replace the code sample below with your own.

<html>
<head>
    <link type="text/css" href="//vjs.zencdn.net/4.10.2/video-js.css" rel="stylesheet" />
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="//vjs.zencdn.net/4.10.2/video.js"></script>

    <script>
        videojs.options.flash.swf = "//vjs.zencdn.net/4.10.2/video-js.swf";
        $(document).ready(function () {
            var playIt = function() {
                var id = this.id();
                alert("Loaded Event for Id:>"+id+"<");
                var jqVid = $("#" + id);
                jqVid.show();
                this.show();
                this.play();
            };

            var vplayer1 = videojs('video1', { });
            vplayer1.ready(function() {
                this.on('loadeddata', playIt);
                this.src({ type: "video/mp4", src: "http://techslides.com/demos/sample-videos/small.mp4" });
                //this.src({ type: "video/flv", src: "http://www.mediacollege.com/video-gallery/testclips/barsandtone.flv" });
                this.load();
            });
       });
    </script>
</head>
<body>
    <div id="div1">
        <!-- 
        <video id="video1" class="video-js vjs-default-skin" style="display: block;"></video>
        -->
        <video id="video1" class="video-js vjs-default-skin" style="display: none;"></video>
    </div>
</body>
</html>

What happened? (actual results)
The video is played but not displayed
If the video tag has display: block -- works as expected

What should have happened? (expected results)
video should have been displayed.

Video.js version (e.g. v4.3.0)
4.10.2

Video.js plugins used (e.g. videojs-youtube)
none

Browsers + platforms where this is happening (e.g. Windows XP IE8)
Windows 8:
Firefox 33.0.2
IE 11.0.9600.17351
Chrome 38.0.2825.104 m

Browsers + platforms where this is NOT happening (e.g. Mac Chrome 30)
No others tried
@mmcc mmcc added the duplicate label Nov 20, 2014
@mmcc
Copy link
Member

mmcc commented Nov 20, 2014

This seems like a duplicate of #1679.

@mmcc mmcc closed this as completed Nov 20, 2014
@ds00424
Copy link
Author

ds00424 commented Nov 20, 2014

I don't think this is a dup. 1679 is about loading a flash vid. You closed 1679 b/c flash is finicky and you may not be able to do anything about it. This issue is with mp4 NOT flash. Example code is very similar, but loading an MP4. This should be reopened.

@gkatsev
Copy link
Member

gkatsev commented Nov 20, 2014

I think the issue is that the style is on the video element and it stays on the video element when show is called.

@gkatsev gkatsev reopened this Nov 20, 2014
@mmcc
Copy link
Member

mmcc commented Nov 20, 2014

You're right, this is not an exact dupe, but I also don't think this is a Video.js issue. The show() method in that context relates to the container div, not the video element itself. Setting display:none; on the .video-js class is what you're looking for.

@mmcc mmcc closed this as completed Nov 20, 2014
@ds00424
Copy link
Author

ds00424 commented Nov 20, 2014

The sample code gets the original ID (video1) and does a jQuery.show(). Looking at it in Firebug the jQuery .show() removes the display: none; from the div container. Then the code calls this.show() where 'this' is the vjs object. My expectation is that the vjs show() api will deal all the items it created and show the video. It does not. I don't think the user should have know the internals of vjs and have to know to remove the display:none from the .video-js class. The vjs api should handle that. Am I looking at this incorrectly??

@mmcc
Copy link
Member

mmcc commented Nov 20, 2014

I think you're misunderstanding me. The issue (I presume) is that you're hiding the video element itself (ie $('video').hide()), not via CSS on the element. If you didn't use Video.js's hide() method, why would you expect the show() method to simply work?

I was using display: none; on the .video-js class as an example, but it also works if you set display: none; on the ID of the video element. Then, when you use the Video.js show() method, it will set the correct element to display: block;

@mmcc
Copy link
Member

mmcc commented Nov 20, 2014

Example. Note, that display: none; on the video's ID could be set however you'd like, including via jQuery's hide() method.

@ds00424
Copy link
Author

ds00424 commented Nov 20, 2014

Ah. I get your point. And will change my code accordingly. Thanks for the example. Seems the issue was around the display:none being in the tag itself.

I do wonder, however, since the orig video tag was display:none in the tag and then vjs applied to it, that perhaps vjs should consider itself in hide state -- and thus show() should work. But that is probably a corner case and there is clearly an alternate way to handle it. Thx.

@mmcc
Copy link
Member

mmcc commented Nov 20, 2014

Cool! Glad that works.

I disagree on the notion that VJS should be crawling styles outside of its scope to make decisions about behavior. Take jQuery's show() method, for example. You can hide elements in 1000 ways, but show() unhides things by setting display: block;...jQuery certainly isn't going to do anything to figure out specifically how to unhide that element, it's simply going to revert whatever it does when the hide() method is used.

What we should actually be doing is using the .vjs-hidden class and simply adding or removing that rather than setting display via inline styles.

@mmcc
Copy link
Member

mmcc commented Nov 21, 2014

Opened #1681 to use classes instead of setting inline styles.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
duplicate
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gkatsev @mmcc @ds00424