Adds autoplay and muted to media

[MarcSkovMadsen]

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]

Codecov Report

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

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

Parameter definitions should be alphabetically sorted.

[philippjfr]

One small comment, otherwise looks good!

[philippjfr]

Merging and resolving the parameter sorting separately.