Adds autoplay and muted to media

examples/reference/panes/Audio.ipynb

@@ -26,6 +26,8 @@
     "* **``loop``** (boolean): Whether to loop when reaching the end of playback\n",
     "* **``object``** (string): Local file path or remote URL pointing to audio file\n",
     "* **``paused``** (boolean): Whether the player is paused\n",
+    "* **``autoplay``** (boolean): When True, it specifies that the output will play automatically. In Chromium browsers this requires the user to click play once\n",
+    "* **``muted``** (boolean): When True, it specifies that the output should be muted\n",
     "* **``throttle``** (int): How frequently to sample the current playback time in milliseconds\n",
     "* **``time``** (float): Current playback time in seconds\n",
     "* **``volume``** (int): Volume in the range 0-100\n",
@@ -150,9 +152,22 @@
   }
  ],
  "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
   "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
    "name": "python",
-   "pygments_lexer": "ipython3"
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.10"
   }
  },
  "nbformat": 4,

examples/reference/panes/Video.ipynb

@@ -25,6 +25,8 @@
     "* **``loop``** (boolean): Whether to loop when reaching the end of playback\n",
     "* **``object``** (string): Local file path or remote URL pointing to audio file\n",
     "* **``paused``** (boolean): Whether the player is paused\n",
+    "* **``autoplay``** (boolean): When True, it specifies that the output will play automatically. In Chromium browsers this requires the user to click play once\n",
+    "* **``muted``** (boolean): When True, it specifies that the output should be muted\n",
     "* **``throttle``** (int): How frequently to sample the current playback time in milliseconds\n",
     "* **``time``** (float): Current playback time in seconds\n",
     "* **``volume``** (int): Volume in the range 0-100\n",
@@ -118,9 +120,22 @@
   }
  ],
  "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
   "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
    "name": "python",
-   "pygments_lexer": "ipython3"
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.10"
   }
  },
  "nbformat": 4,

panel/models/audio.ts

@@ -25,6 +25,8 @@ export class AudioView extends PanelHTMLBoxView {
     this.connect(this.model.properties.time.change, () => this.set_time())
     this.connect(this.model.properties.value.change, () => this.set_value())
     this.connect(this.model.properties.volume.change, () => this.set_volume())
+    this.connect(this.model.properties.muted.change, () => this.set_muted())
+    this.connect(this.model.properties.autoplay.change, () => this.set_autoplay())
   }
 
   render(): void {
@@ -34,6 +36,8 @@ export class AudioView extends PanelHTMLBoxView {
     this.audioEl.src = this.model.value
     this.audioEl.currentTime = this.model.time
     this.audioEl.loop = this.model.loop
+    this.audioEl.muted = this.model.muted
+    this.audioEl.autoplay = this.model.autoplay
     if (this.model.volume != null)
       this.audioEl.volume = this.model.volume/100
     else
@@ -72,6 +76,14 @@ export class AudioView extends PanelHTMLBoxView {
     this.audioEl.loop = this.model.loop
   }
 
+  set_muted(): void {
+    this.audioEl.muted = this.model.muted
+  }
+
+  set_autoplay(): void {
+    this.audioEl.autoplay = this.model.autoplay
+  }
+
   set_paused(): void {
     if (!this.audioEl.paused && this.model.paused)
       this.audioEl.pause()
@@ -109,6 +121,8 @@ export namespace Audio {
   export type Props = HTMLBox.Props & {
     loop: p.Property<boolean>
     paused: p.Property<boolean>
+    muted: p.Property<boolean>
+    autoplay: p.Property<boolean>
     time: p.Property<number>
     throttle: p.Property<number>
     value: p.Property<any>
@@ -133,6 +147,8 @@ export class Audio extends HTMLBox {
     this.define<Audio.Props>(({Any, Boolean, Int, Number}) => ({
       loop:     [ Boolean, false ],
       paused:   [ Boolean,  true ],
+      muted:    [ Boolean, false ],
+      autoplay: [ Boolean, false ],
       time:     [ Number,      0 ],
       throttle: [ Number,    250 ],
       value:    [ Any,        '' ],

panel/models/video.ts

@@ -22,6 +22,8 @@ export class VideoView extends PanelHTMLBoxView {
     super.connect_signals()
     this.connect(this.model.properties.loop.change, () => this.set_loop())
     this.connect(this.model.properties.paused.change, () => this.set_paused())
+    this.connect(this.model.properties.muted.change, () => this.set_muted())
+    this.connect(this.model.properties.autoplay.change, () => this.set_autoplay())
     this.connect(this.model.properties.time.change, () => this.set_time())
     this.connect(this.model.properties.value.change, () => this.set_value())
     this.connect(this.model.properties.volume.change, () => this.set_volume())
@@ -43,6 +45,8 @@ export class VideoView extends PanelHTMLBoxView {
     this.videoEl.src = this.model.value
     this.videoEl.currentTime = this.model.time
     this.videoEl.loop = this.model.loop
+    this.videoEl.muted = this.model.muted
+    this.videoEl.autoplay = this.model.autoplay
     if (this.model.volume != null)
       this.videoEl.volume = this.model.volume/100
     else
@@ -81,6 +85,14 @@ export class VideoView extends PanelHTMLBoxView {
     this.videoEl.loop = this.model.loop
   }
 
+  set_muted(): void {
+    this.videoEl.muted = this.model.muted
+  }
+
+  set_autoplay(): void {
+    this.videoEl.autoplay = this.model.autoplay
+  }
+
   set_paused(): void {
     if (!this.videoEl.paused && this.model.paused)
       this.videoEl.pause()
@@ -117,6 +129,8 @@ export namespace Video {
   export type Props = HTMLBox.Props & {
     loop: p.Property<boolean>
     paused: p.Property<boolean>
+    muted: p.Property<boolean>
+    autoplay: p.Property<boolean>
     time: p.Property<number>
     throttle: p.Property<number>
     value: p.Property<any>
@@ -141,6 +155,8 @@ export class Video extends HTMLBox {
     this.define<Video.Props>(({Any, Boolean, Int, Number}) => ({
       loop:     [ Boolean, false ],
       paused:   [ Boolean,  true ],
+      muted:    [ Boolean, false ],
+      autoplay: [ Boolean, false ],
       time:     [ Number,      0 ],
       throttle: [ Int,       250 ],
       value:    [ Any,        '' ],

panel/models/widgets.py

@@ -67,6 +67,10 @@ class Audio(HTMLBox):
 
     paused = Bool(False, help="""Whether the audio is paused""")
 
+    muted = Bool(False, help="""Whether the audio is muted""")
+
+    autoplay = Bool(False, help="""Whether the audio is playing automatically""")
+
     time = Float(0, help="""
         The current time stamp of the audio playback""")
 
@@ -84,6 +88,10 @@ class Video(HTMLBox):
 
     paused = Bool(False, help="""Whether the video is paused""")
 
+    muted = Bool(False, help="""Whether the video is muted""")
+
+    autoplay = Bool(False, help="""Whether the video is playing automatically""")
+
     time = Float(0, help="""
         The current time stamp of the video playback""")
 

panel/pane/media.py

@@ -34,6 +34,13 @@ class _MediaBase(PaneBase):
     volume = param.Number(default=None, bounds=(0, 100), doc="""
         The volume of the media player.""")
 
+    autoplay = param.Boolean(default=False, doc="""
+        When True, it specifies that the output will play automatically. 
+        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.""")
+
     _default_mime = None
 
     _formats = []

panel/tests/pane/test_media.py

@@ -35,6 +35,19 @@ def test_local_video(document, comm):
     assert model.value == 'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAAhtZGF0AAAA1m1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAABidWR0YQAAAFptZXRhAAAAAAAAACFoZGxyAAAAAAAAAABtZGlyYXBwbAAAAAAAAAAAAAAAAC1pbHN0AAAAJal0b28AAAAdZGF0YQAAAAEAAAAATGF2ZjU3LjQxLjEwMA==' # noqa
 
 
+def test_video_autoplay(document, comm):
+    video = Video(str(ASSETS / 'mp4.mp4'), autoplay=True)
+    model = video.get_root(document, comm=comm)
+
+    assert model.autoplay
+
+def test_video_muted(document, comm):
+    video = Video(str(ASSETS / 'mp4.mp4'), muted=True)
+    model = video.get_root(document, comm=comm)
+
+    assert model.muted
+
+
 def test_local_audio(document, comm):
     audio = Audio(str(ASSETS / 'mp3.mp3'))
     model = audio.get_root(document, comm=comm)
@@ -86,3 +99,17 @@ def test_audio_url(document, comm):
     model = audio.get_root(document, comm=comm)
 
     assert audio_url == model.value
+
+def test_audio_muted(document, comm):
+    audio_url = 'http://ccrma.stanford.edu/~jos/mp3/pno-cs.mp3'
+    audio = Audio(audio_url, muted=True)
+    model = audio.get_root(document, comm=comm)
+
+    assert model.muted
+
+def test_audio_autoplay(document, comm):
+    audio_url = 'http://ccrma.stanford.edu/~jos/mp3/pno-cs.mp3'
+    audio = Audio(audio_url, autoplay=True)
+    model = audio.get_root(document, comm=comm)
+
+    assert model.autoplay