Video.js: How can I disable childrens of video-js

Created on 19 Jul 2018  路  10Comments  路  Source: videojs/video.js

Description

Briefly describe the issue.
I want disable all auto generated divs from my little project.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- estilos css -->
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/estilos.css" />
    <!-- librerias js -->
    <script src="lib/jquery-1.7.2.min.js"></script>
    <script src="lib/jquery-ui.min.js"></script>
    <script src="lib/jquery.ui.touch-punch.min.js"></script>
    <script src="lib/video.js"></script>
    <script src="lib/videojs-abloop.min.js"></script>

</head>

<body>
    <div id="caja_principal">
        <video id="video" src="video/1. inicio.mp4" controls="false"></video>
    </div>
    <div id="pipa" style="width:50px; height:50px; background-color: green;"></div>
</body>

<script>
    var player = videojs("video", {
        autoplay: true,
        controlBar: {
            'fullscreenToggle': false
        },
        controls: false,
        plugins: {
            abLoopPlugin: {}
        }
    });
    $(document).ready(function() {

        var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

        if (!isMobile) {
            widthRatio = 0.95;
            heightRatio = 0.65;
            var deg = 0;
            document.body.style.webkitTransform = 'rotate(' + deg + 'deg)';
            document.body.style.mozTransform = 'rotate(' + deg + 'deg)';
            document.body.style.msTransform = 'rotate(' + deg + 'deg)';
            document.body.style.oTransform = 'rotate(' + deg + 'deg)';
            document.body.style.transform = 'rotate(' + deg + 'deg)';
        }

    });

</script>


</html>

When I load the page then, appears this under de video tag

<video id="video_html5_api" src="video/1. inicio.mp4" tabindex="-1" class="vjs-tech" autoplay=""></video>
<div class="vjs-poster vjs-hidden" tabindex="-1" aria-disabled="false"></div>
<div class="vjs-text-track-display" aria-live="off" aria-atomic="true"></div>
<div class="vjs-loading-spinner" dir="ltr"><span class="vjs-control-text">Video Player is loading.</span></div>
<button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false">
<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Play Video</span>
</button>
<div class="vjs-control-bar" dir="ltr">
    <button class="vjs-play-control vjs-control vjs-button vjs-playing" type="button" title="Pause" aria-disabled="false">
<span aria-hidden="true" class="vjs-icon-placeholder">
</span>
<span class="vjs-control-text" aria-live="polite">Pause</span>
</button>
    <div class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal">
        <button class="vjs-mute-control vjs-control vjs-button vjs-vol-3" type="button" title="Mute" aria-disabled="false">
<span aria-hidden="true" class="vjs-icon-placeholder"></span>
<span class="vjs-control-text" aria-live="polite">Mute</span></button>
        <div class="vjs-volume-control vjs-control vjs-volume-horizontal">
            <div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Volume Level" aria-live="polite" aria-valuetext="100%">
                <div class="vjs-volume-level"><span class="vjs-control-text">
</span>
                </div>
            </div>
        </div>
    </div>
    <div class="vjs-current-time vjs-time-control vjs-control">
        <span class="vjs-control-text">Current Time&nbsp;</span>
        <span class="vjs-current-time-display" aria-live="off">0:14</span>
    </div>
    <div class="vjs-time-control vjs-time-divider">
        <div>
            <span>/</span>
        </div>
    </div>
    <div class="vjs-duration vjs-time-control vjs-control">
        <span class="vjs-control-text">Duration&nbsp;</span>
        <span class="vjs-duration-display" aria-live="off">5:31</span>
    </div>
    <div class="vjs-progress-control vjs-control">
        <div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="5.08" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="0:16 of 5:31">
            <div class="vjs-load-progress" style="width: 22.3547%;">
                <span class="vjs-control-text">
<span>Loaded</span>: 0%</span>
                <div style="left: 0%; width: 100%;"></div>
            </div>
            <div class="vjs-mouse-display">
                <div class="vjs-time-tooltip"></div>
            </div>
            <div class="vjs-play-progress vjs-slider-bar" style="width: 5.08%;">
                <div class="vjs-time-tooltip" style="right: -27.3917px;">0:14</div>
                <span class="vjs-control-text">
<span>Progress</span>: 0%</span>
            </div>
        </div>
    </div>
    <div class="vjs-live-control vjs-control vjs-hidden">
        <div class="vjs-live-display" aria-live="off">
            <span class="vjs-control-text">Stream Type&nbsp;</span>LIVE
        </div>
    </div>
    <div class="vjs-remaining-time vjs-time-control vjs-control">
        <span class="vjs-control-text">Remaining Time&nbsp;</span>
        <span class="vjs-remaining-time-display" aria-live="off">-5:17</span>
    </div>
    <div class="vjs-custom-control-spacer vjs-spacer ">&nbsp;</div>
    <div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden">
        <button class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Playback Rate" aria-haspopup="true" aria-expanded="false">
<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Playback Rate</span>
</button>
        <div class="vjs-menu">
            <ul class="vjs-menu-content" role="menu"></ul>
        </div>
        <div class="vjs-playback-rate-value">1x</div>
    </div>
    <div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden">
        <button class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Chapters" aria-haspopup="true" aria-expanded="false">
<span aria-hidden="true" class="vjs-icon-placeholder"></span>
<span class="vjs-control-text" aria-live="polite">Chapters</span>
</button>
        <div class="vjs-menu">
            <ul class="vjs-menu-content" role="menu">
                <li class="vjs-menu-title" tabindex="-1">Chapters</li>
            </ul>
        </div>
    </div>
    <div class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden">
        <button class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Descriptions" aria-haspopup="true" aria-expanded="false">
<span aria-hidden="true" class="vjs-icon-placeholder"></span>
<span class="vjs-control-text" aria-live="polite">Descriptions</span>
</button>
        <div class="vjs-menu">
            <ul class="vjs-menu-content" role="menu">
                <li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-disabled="false" aria-checked="true">
                    <span class="vjs-menu-item-text">descriptions off</span><span class="vjs-control-text" aria-live="polite">, selected</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden">
        <button class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Subtitles" aria-haspopup="true" aria-expanded="false">
<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Subtitles</span>
</button>
        <div class="vjs-menu">
            <ul class="vjs-menu-content" role="menu">
                <li class="vjs-menu-item vjs-texttrack-settings" tabindex="-1" role="menuitem" aria-disabled="false">
                    <span class="vjs-menu-item-text">subtitles settings</span>
                    <span class="vjs-control-text" aria-live="polite">, opens subtitles settings dialog</span>
                </li>
                <li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-disabled="false" aria-checked="true">
                    <span class="vjs-menu-item-text">subtitles off</span>
                    <span class="vjs-control-text" aria-live="polite">, selected</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden">
        <button class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Audio Track" aria-haspopup="true" aria-expanded="false">
<span aria-hidden="true" class="vjs-icon-placeholder">
</span>
<span class="vjs-control-text" aria-live="polite">Audio Track</span>
</button>
        <div class="vjs-menu">
            <ul class="vjs-menu-content" role="menu">
            </ul>
        </div>
    </div><button class="vjs-fullscreen-control vjs-control vjs-button" type="button" title="Fullscreen" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Fullscreen</span></button>
    <button
        class="vjs-control vjs-button abLoopButton start" type="button" aria-disabled="false">0:15.6</button><button class="vjs-control vjs-button abLoopButton end" type="button" aria-disabled="false">0:20.0</button><button class="vjs-control vjs-button abLoopButton enabled" type="button" aria-disabled="false">LOOP ON</button></div>
<div class="vjs-error-display vjs-modal-dialog vjs-hidden "
    tabindex="-1" aria-describedby="video_component_422_description" aria-hidden="true" aria-label="Modal Window" role="dialog">
    <p class="vjs-modal-dialog-description vjs-control-text" id="video_component_422_description">This is a modal window.</p>
    <div class="vjs-modal-dialog-content" role="document"></div>
</div>
<div class="vjs-modal-dialog vjs-hidden  vjs-text-track-settings" tabindex="-1" aria-describedby="video_component_428_description" aria-hidden="true" aria-label="Caption Settings Dialog" role="dialog">
    <p class="vjs-modal-dialog-description vjs-control-text" id="video_component_428_description">Beginning of dialog window. Escape will cancel and close the window.</p>
    <div class="vjs-modal-dialog-content" role="document">
        <div class="vjs-track-settings-colors">
            <fieldset class="vjs-fg-color vjs-track-setting">
                <legend id="captions-text-legend-video_component_428">Text</legend><label id="captions-foreground-color-video_component_428" class="vjs-label">Color</label><select aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428"><option id="captions-foreground-color-video_component_428-White" value="#FFF" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-White">White</option><option id="captions-foreground-color-video_component_428-Black" value="#000" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-Black">Black</option><option id="captions-foreground-color-video_component_428-Red" value="#F00" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-Red">Red</option><option id="captions-foreground-color-video_component_428-Green" value="#0F0" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-Green">Green</option><option id="captions-foreground-color-video_component_428-Blue" value="#00F" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-Blue">Blue</option><option id="captions-foreground-color-video_component_428-Yellow" value="#FF0" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-Yellow">Yellow</option><option id="captions-foreground-color-video_component_428-Magenta" value="#F0F" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-Magenta">Magenta</option><option id="captions-foreground-color-video_component_428-Cyan" value="#0FF" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-color-video_component_428 captions-foreground-color-video_component_428-Cyan">Cyan</option></select>
                <span
                    class="vjs-text-opacity vjs-opacity"><label id="captions-foreground-opacity-video_component_428" class="vjs-label">Transparency</label><select aria-labelledby="captions-text-legend-video_component_428 captions-foreground-opacity-video_component_428"><option id="captions-foreground-opacity-video_component_428-Opaque" value="1" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-opacity-video_component_428 captions-foreground-opacity-video_component_428-Opaque">Opaque</option><option id="captions-foreground-opacity-video_component_428-SemiTransparent" value="0.5" aria-labelledby="captions-text-legend-video_component_428 captions-foreground-opacity-video_component_428 captions-foreground-opacity-video_component_428-SemiTransparent">Semi-Transparent</option></select></span>
            </fieldset>
            <fieldset class="vjs-bg-color vjs-track-setting">
                <legend id="captions-background-video_component_428">Background</legend><label id="captions-background-color-video_component_428" class="vjs-label">Color</label><select aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428"><option id="captions-background-color-video_component_428-Black" value="#000" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-Black">Black</option><option id="captions-background-color-video_component_428-White" value="#FFF" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-White">White</option><option id="captions-background-color-video_component_428-Red" value="#F00" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-Red">Red</option><option id="captions-background-color-video_component_428-Green" value="#0F0" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-Green">Green</option><option id="captions-background-color-video_component_428-Blue" value="#00F" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-Blue">Blue</option><option id="captions-background-color-video_component_428-Yellow" value="#FF0" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-Yellow">Yellow</option><option id="captions-background-color-video_component_428-Magenta" value="#F0F" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-Magenta">Magenta</option><option id="captions-background-color-video_component_428-Cyan" value="#0FF" aria-labelledby="captions-background-video_component_428 captions-background-color-video_component_428 captions-background-color-video_component_428-Cyan">Cyan</option></select>
                <span
                    class="vjs-bg-opacity vjs-opacity"><label id="captions-background-opacity-video_component_428" class="vjs-label">Transparency</label><select aria-labelledby="captions-background-video_component_428 captions-background-opacity-video_component_428"><option id="captions-background-opacity-video_component_428-Opaque" value="1" aria-labelledby="captions-background-video_component_428 captions-background-opacity-video_component_428 captions-background-opacity-video_component_428-Opaque">Opaque</option><option id="captions-background-opacity-video_component_428-SemiTransparent" value="0.5" aria-labelledby="captions-background-video_component_428 captions-background-opacity-video_component_428 captions-background-opacity-video_component_428-SemiTransparent">Semi-Transparent</option><option id="captions-background-opacity-video_component_428-Transparent" value="0" aria-labelledby="captions-background-video_component_428 captions-background-opacity-video_component_428 captions-background-opacity-video_component_428-Transparent">Transparent</option></select></span>
            </fieldset>
            <fieldset class="vjs-window-color vjs-track-setting">
                <legend id="captions-window-video_component_428">Window</legend><label id="captions-window-color-video_component_428" class="vjs-label">Color</label><select aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428"><option id="captions-window-color-video_component_428-Black" value="#000" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-Black">Black</option><option id="captions-window-color-video_component_428-White" value="#FFF" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-White">White</option><option id="captions-window-color-video_component_428-Red" value="#F00" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-Red">Red</option><option id="captions-window-color-video_component_428-Green" value="#0F0" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-Green">Green</option><option id="captions-window-color-video_component_428-Blue" value="#00F" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-Blue">Blue</option><option id="captions-window-color-video_component_428-Yellow" value="#FF0" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-Yellow">Yellow</option><option id="captions-window-color-video_component_428-Magenta" value="#F0F" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-Magenta">Magenta</option><option id="captions-window-color-video_component_428-Cyan" value="#0FF" aria-labelledby="captions-window-video_component_428 captions-window-color-video_component_428 captions-window-color-video_component_428-Cyan">Cyan</option></select>
                <span
                    class="vjs-window-opacity vjs-opacity"><label id="captions-window-opacity-video_component_428" class="vjs-label">Transparency</label><select aria-labelledby="captions-window-video_component_428 captions-window-opacity-video_component_428"><option id="captions-window-opacity-video_component_428-Transparent" value="0" aria-labelledby="captions-window-video_component_428 captions-window-opacity-video_component_428 captions-window-opacity-video_component_428-Transparent">Transparent</option><option id="captions-window-opacity-video_component_428-SemiTransparent" value="0.5" aria-labelledby="captions-window-video_component_428 captions-window-opacity-video_component_428 captions-window-opacity-video_component_428-SemiTransparent">Semi-Transparent</option><option id="captions-window-opacity-video_component_428-Opaque" value="1" aria-labelledby="captions-window-video_component_428 captions-window-opacity-video_component_428 captions-window-opacity-video_component_428-Opaque">Opaque</option></select></span>
            </fieldset>
        </div>
        <div class="vjs-track-settings-font">
            <fieldset class="vjs-font-percent vjs-track-setting">
                <legend id="captions-font-size-video_component_428" class="">Font Size</legend><select aria-labelledby="captions-font-size-video_component_428"><option id="captions-font-size-video_component_428-50" value="0.50" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-50">50%</option><option id="captions-font-size-video_component_428-75" value="0.75" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-75">75%</option><option id="captions-font-size-video_component_428-100" value="1.00" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-100">100%</option><option id="captions-font-size-video_component_428-125" value="1.25" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-125">125%</option><option id="captions-font-size-video_component_428-150" value="1.50" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-150">150%</option><option id="captions-font-size-video_component_428-175" value="1.75" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-175">175%</option><option id="captions-font-size-video_component_428-200" value="2.00" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-200">200%</option><option id="captions-font-size-video_component_428-300" value="3.00" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-300">300%</option><option id="captions-font-size-video_component_428-400" value="4.00" aria-labelledby="captions-font-size-video_component_428 captions-font-size-video_component_428-400">400%</option></select></fieldset>
            <fieldset
                class="vjs-edge-style vjs-track-setting">
                <legend id="video_component_428" class="">Text Edge Style</legend><select aria-labelledby="video_component_428"><option id="video_component_428-None" value="none" aria-labelledby="video_component_428 video_component_428-None">None</option><option id="video_component_428-Raised" value="raised" aria-labelledby="video_component_428 video_component_428-Raised">Raised</option><option id="video_component_428-Depressed" value="depressed" aria-labelledby="video_component_428 video_component_428-Depressed">Depressed</option><option id="video_component_428-Uniform" value="uniform" aria-labelledby="video_component_428 video_component_428-Uniform">Uniform</option><option id="video_component_428-Dropshadow" value="dropshadow" aria-labelledby="video_component_428 video_component_428-Dropshadow">Dropshadow</option></select></fieldset>
                <fieldset
                    class="vjs-font-family vjs-track-setting">
                    <legend id="captions-font-family-video_component_428" class="">Font Family</legend><select aria-labelledby="captions-font-family-video_component_428"><option id="captions-font-family-video_component_428-ProportionalSansSerif" value="proportionalSansSerif" aria-labelledby="captions-font-family-video_component_428 captions-font-family-video_component_428-ProportionalSansSerif">Proportional Sans-Serif</option><option id="captions-font-family-video_component_428-MonospaceSansSerif" value="monospaceSansSerif" aria-labelledby="captions-font-family-video_component_428 captions-font-family-video_component_428-MonospaceSansSerif">Monospace Sans-Serif</option><option id="captions-font-family-video_component_428-ProportionalSerif" value="proportionalSerif" aria-labelledby="captions-font-family-video_component_428 captions-font-family-video_component_428-ProportionalSerif">Proportional Serif</option><option id="captions-font-family-video_component_428-MonospaceSerif" value="monospaceSerif" aria-labelledby="captions-font-family-video_component_428 captions-font-family-video_component_428-MonospaceSerif">Monospace Serif</option><option id="captions-font-family-video_component_428-Casual" value="casual" aria-labelledby="captions-font-family-video_component_428 captions-font-family-video_component_428-Casual">Casual</option><option id="captions-font-family-video_component_428-Script" value="script" aria-labelledby="captions-font-family-video_component_428 captions-font-family-video_component_428-Script">Script</option><option id="captions-font-family-video_component_428-SmallCaps" value="small-caps" aria-labelledby="captions-font-family-video_component_428 captions-font-family-video_component_428-SmallCaps">Small Caps</option></select></fieldset>
        </div>
        <div class="vjs-track-settings-controls"><button class="vjs-default-button" title="restore all settings to the default values">Reset<span class="vjs-control-text"> restore all settings to the default values</span></button><button class="vjs-done-button">Done</button></div>
    </div><button class="vjs-close-button vjs-control vjs-button" type="button" aria-disabled="false" title="Close Modal Dialog"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Close Modal Dialog</span></button>
    <p
        class="vjs-control-text">End of dialog window.</p>
</div><iframe class="vjs-resize-manager"></iframe>

How can i disable this?

Thanks.

picture mriol94

All 10 comments

馃憢 Thanks for opening your first issue here! 馃憢

If you're reporting a 馃悶 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

welcome[bot] picture welcome[bot] on 19 Jul 2018

Why do you want to disable all these divs? I noticed that you may not be including the Video.js CSS file on the page and adding the class to the video element. When the CSS is available, it'll make sure that the elements are hidden as appropriate.

gkatsev picture gkatsev on 19 Jul 2018

I just want to show the video without any controls

mriol94 picture mriol94 on 19 Jul 2018

Ah, you should then remove the controls attribute from the video element. The controls attribute is a boolean attribute that means that if it's present it's considered on, regardless of the value it's set.

So, just change

        <video id="video" src="video/1. inicio.mp4" controls="false"></video>

to

        <video id="video" src="video/1. inicio.mp4"></video>

Hope that helps.

gkatsev picture gkatsev on 19 Jul 2018

still the same

mriol94 picture mriol94 on 19 Jul 2018

You probably still need to include the Video.js CSS and also target its class:

<link href="https://vjs.zencdn.net/7.0/video-js.css" rel="stylsheet">
<video id="video" class="video-js" src="video/1. inicio.mp4"></video>

You can self-host the CSS as well.

gkatsev picture gkatsev on 19 Jul 2018

not works

mriol94 picture mriol94 on 20 Jul 2018
👎1 👍1

Here's a working example: https://jsbin.com/lenuyus/edit?html,js,output
Hope it helps

gkatsev picture gkatsev on 20 Jul 2018

The "working" example also doesn't work.
There is a paragraph with the text "Beginning of dialog window. Escape will cancel and close the window." for example. Where is it needed? I can't figure out and it looks like there are a lot of unnecessary elements blowing up the DOM.

jarkt picture jarkt on 15 Jan 2020
👍1

This maybe help
Disable only control related components from default children option
https://github.com/videojs/video.js/blob/v7.8.3/src/js/player.js#L4839

swimyoung picture swimyoung on 24 Jun 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

kocoten1992 picture kocoten1992  路  4Comments
zhulduz picture zhulduz  路  3Comments
SolmazKh picture SolmazKh  路  4Comments
jeonghwaYoo picture jeonghwaYoo  路  3Comments
d3x7r0 picture d3x7r0  路  4Comments