@paperbits/core/video-player/ko/videoPlayerEditor.html

Paperbits core components.

<details open>
    <summary>
        Source
    </summary>
    <div class="dropzone">
        <a href="#" class="dropzone-showbox" role="button" aria-label="Video source"
            data-bind="balloon: { component: { name: 'media-selector', params: { mimeType: 'video/', onSelect: $component.onMediaSelected, mimeType: $component.mimeType } }, position: 'right' }">
            <!-- ko if: sourceUrl -->
            <video class="fit" controls>
                <source data-bind="attr: { src: sourceUrl }" />
            </video>
            <!-- /ko -->
        </a>
    </div>
</details>

<details open>
    <summary>
        Miscellaneous
    </summary>
    <label for="controls" class="form-label">
        <input type="checkbox" id="controls" data-bind="checked: controls" />Controls
    </label>
    <!-- <label for="muted" class="form-label">
                <input type="checkbox" id="muted" data-bind="checked: muted" />Muted
            </label> -->
    <label for="autoplay" class="form-label">
        <input type="checkbox" id="autoplay" data-bind="checked: autoplay" />Autoplay
    </label>

    <!-- ko if: sourceUrl -->
    <div class="dropzone">
        <label for="source" class="form-label">
            Poster
            <button class="btn btn-info" role="tooltip" aria-label="Error" aria-haspopup="true" aria-hidden="true"
                data-bind="tooltip: 'Source of the picture. To change, click on preview area below and select a picture from media libaray.'"></button>
        </label>
        <a href="#" id="source" role="img" class="dropzone-showbox"
            data-bind="balloon: { position: 'right', component: { name: 'media-selector', params: { mimeType: 'image/', onSelect: $component.onPosterSelected } } }, focus: true">
            <div class="fit" role="presentation" data-bind="background: background"></div>
        </a>
    </div>
    <!-- /ko -->
</details>

<details open>
    <summary>
        Size
    </summary>
    <size-editor params="{ features: 'height,width', sizeConfig: sizeConfig, onUpdate: onSizeChange }">
    </size-editor>
</details>

<details open>
    <summary>
        Styling
    </summary>
    <div class="form-group">
        <label for="appearanceStyle" class="form-label">
            Appearance
            <button class="btn btn-info" role="tooltip"
                data-bind="tooltip: 'Predefined appearance from style guide.'"></button>
        </label>
        <dropdown id="appearanceStyle"
            params="{ options: appearanceStyles, value: appearanceStyle, optionsText: 'displayName', optionsValue: 'key', heading: 'Appearance' }">
        </dropdown>
    </div>
</details>