8000 Adds autoplay and muted to media by MarcSkovMadsen · Pull Request #3053 · holoviz/panel · GitHub
[go: up one dir, main page]
Skip to content

Adds autoplay and muted to media #3053

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
Merged
philippjfr merged 2 commits into from
Jan 11, 2022
Merged

Adds autoplay and muted to media #3053

philippjfr merged 2 commits into from
Jan 11, 2022

Conversation

@MarcSkovMadsen
Copy link
Collaborator
@MarcSkovMadsen MarcSkovMadsen commented Dec 29, 2021 •
edited
Loading

Addresses #2978

Adding autoplay will make it much, much faster to evaluate several audio or video files. Or a situation where the audio or video file is output from some model that you are exploring.

I decided to add muted now I was working on this one.

Todo

[x] - Implement
[x] - Setup automated tests
[x] - Test manually
[x] - Document in reference examples

Manual Test

autoplay_and_muted.mp4

(left is Firefox, right is Edge. Note how Edge, which is chromium based, requires the user to click play once before autoplay will be allowed.)

import panel as pn

pn.extension(sizing_mode="stretch_width")


audio_options = ["http://ccrma.stanford.edu/~jos/mp3/pno-cs.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"]
video_options = ["https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"]

audio = pn.pane.Audio('http://ccrma.stanford.edu/~jos/mp3/pno-cs.mp3', name='Audio', paused=False)
video = pn.pane.Video('https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4', width=640, height=360, loop=True, paused=False)

select_audio = pn.widgets.Select(options=audio_options)

@pn.depends(value=select_audio, watch=True)
def update_audio(value):
    audio.object=value

select_video = pn.widgets.Select(options=video_options)

@pn.depends(value=select_video, watch=True)
def update_video(value):
    video.object=value

ACCENT_COLOR = "#0072B5"
DEFAULT_PARAMS = {
    "site": "Awesome Panel",
    "accent_base_color": ACCENT_COLOR,
    "header_background": ACCENT_COLOR,
}

template = pn.template.FastListTemplate(
    title="PR to add autoplay and muted to Audio and Video",
    main=[
        pn.Column(
            select_audio, 
            audio, 
            pn.Param(audio, parameters=["muted", "paused", "object", "autoplay"])
    ), 
    pn.Column(
        select_video, 
        video, 
        pn.Param(video, parameters=["muted", "paused", "object", "autoplay"])
    )
], **DEFAULT_PARAMS).servable()

@codecov
Copy link
codecov bot commented Dec 29, 2021 •
edited
Loading

Codecov Report

Merging #3053 (665f8c2) into master (ced61b8) will increase coverage by 0.01%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3053      +/-   ##
==========================================
+ Coverage   83.27%   83.28%   +0.01%     
==========================================
  Files         190      190              
  Lines       25001    25025      +24     
==========================================
+ Hits        20819    20843      +24     
  Misses       4182     4182
Impacted Files Coverage Δ
panel/models/widgets.py 100.00% <100.00%> (ø)
panel/pane/media.py 97.72% <100.00%> (+0.05%) ⬆️
panel/tests/pane/test_media.py 97.29% <100.00%> (+0.86%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ced61b8...665f8c2. Read the comment docs.

philippjfr
philippjfr reviewed Jan 4, 2022
View reviewed changes
panel/pane/media.py
In Chromium browsers this requires the user to click play once.""")

muted = param.Boolean(default=False, doc="""
When True, it specifies that the output should be muted.""")
Copy link
Member
@philippjfr philippjfr Jan 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

< 8000 /form>

Parameter definitions should be alphabetically sorted.

@philippjfr
Copy link
Member
philippjfr commented Jan 4, 2022

One small comment, otherwise looks good!

@philippjfr
Copy link
Member
philippjfr commented Jan 11, 2022

Merging and resolving the parameter sorting separately.

@philippjfr philippjfr merged commit adb4013 into master Jan 11, 2022
@philippjfr philippjfr deleted the add-autoplay-and-muted-to-media branch January 11, 2022 11:05
@github-actions
Copy link
github-actions bot commented Sep 11, 2025

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 11, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@philippjfr philippjfr philippjfr left review comments

Assignees

No one assigned

Labels

ready for review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@MarcSkovMadsen @philippjfr
0