diff --git a/core/modules/file/config/schema/file.schema.yml b/core/modules/file/config/schema/file.schema.yml
index b9f8918f63..5e8d8ce9a0 100644
--- a/core/modules/file/config/schema/file.schema.yml
+++ b/core/modules/file/config/schema/file.schema.yml
@@ -67,6 +67,49 @@ field.field_settings.file:
       type: boolean
       label: 'Enable Description field'
 
+field.formatter.settings.file_audio:
+  type: mapping
+  label: 'File audio display format settings'
+  mapping:
+    controls:
+      type: boolean
+      label: 'Show audio controls'
+    autoplay:
+      type: boolean
+      label: 'Autoplay'
+    loop:
+      type: boolean
+      label: 'Loop'
+    multiple_file_behavior:
+      type: string
+      label: 'Display of multiple files'
+
+field.formatter.settings.file_video:
+  type: mapping
+  label: 'File video display format settings'
+  mapping:
+    controls:
+      type: boolean
+      label: 'Show audio controls'
+    autoplay:
+      type: boolean
+      label: 'Autoplay'
+    loop:
+      type: boolean
+      label: 'Loop'
+    muted:
+      type: boolean
+      label: 'Muted'
+    width:
+      type: integer
+      label: 'Width'
+    height:
+      type: integer
+      label: 'Height'
+    multiple_file_behavior:
+      type: string
+      label: 'Display of multiple files'
+
 field.formatter.settings.file_default:
   type: mapping
   label: 'Generic file format settings'
diff --git a/core/modules/file/file.module b/core/modules/file/file.module
index a6fc3f6ebe..4161bd8a08 100644
--- a/core/modules/file/file.module
+++ b/core/modules/file/file.module
@@ -571,6 +571,12 @@ function file_theme() {
     'file_managed_file' => [
       'render element' => 'element',
     ],
+    'file_audio' => [
+      'variables' => ['files' => [], 'attributes' => NULL],
+    ],
+    'file_video' => [
+      'variables' => ['files' => [], 'attributes' => NULL],
+    ],
 
     // From file.field.inc.
     'file_widget_multiple' => [
diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileAudioFormatter.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileAudioFormatter.php
new file mode 100644
index 0000000000..901521e912
--- /dev/null
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileAudioFormatter.php
@@ -0,0 +1,118 @@
+<?php
+
+namespace Drupal\file\Plugin\Field\FieldFormatter;
+
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Template\Attribute;
+
+/**
+ * Plugin implementation of the 'file_audio' formatter.
+ *
+ * @FieldFormatter(
+ *   id = "file_audio",
+ *   label = @Translation("Audio"),
+ *   description = @Translation("Render the file using an HTML5 audio tag."),
+ *   field_types = {
+ *     "file"
+ *   }
+ * )
+ */
+class FileAudioFormatter extends FileMediaFormatter implements ContainerFactoryPluginInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  const APPLICABLE_MIME_TYPE = 'audio';
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return [
+      'controls' => TRUE,
+      'autoplay' => FALSE,
+      'loop' => FALSE,
+      'multiple_file_behavior' => 'tags',
+    ] + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element['controls'] = array(
+      '#title' => $this->t('Show audio controls'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('controls'),
+    );
+    $element['autoplay'] = array(
+      '#title' => $this->t('Autoplay'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('autoplay'),
+    );
+    $element['loop'] = array(
+      '#title' => $this->t('Loop'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('loop'),
+    );
+    $element['multiple_file_behavior'] = array(
+      '#title' => $this->t('Display of multiple files'),
+      '#type' => 'radios',
+      '#options' => array(
+        'tags' => $this->t('Use multiple @tag tags, each with a single source.', array('@tag' => '<audio>')),
+        'sources' => $this->t('Use multiple sources within a single @tag tag.', array('@tag' => '<audio>')),
+      ),
+      '#default_value' => $this->getSetting('multiple_file_behavior'),
+    );
+
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = [];
+    $summary[] = $this->t('Controls: %controls', array('%controls' => $this->getSetting('controls') ? $this->t('visible') : $this->t('hidden')));
+    $summary[] = $this->t('Autoplay: %autoplay', array('%autoplay' => $this->getSetting('autoplay') ? $this->t('yes') : $this->t('no')));
+    $summary[] = $this->t('Loop: %loop', array('%loop' => $this->getSetting('loop') ? $this->t('yes') : $this->t('no')));
+    $summary[] = $this->t('Multiple files: %multiple', array('%multiple' => $this->getSetting('multiple_file_behavior')));
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $elements = [];
+
+    $source_files = $this->getSourceFiles($items, $langcode);
+
+    if (!empty($source_files)) {
+      // Prepare the audio attributes according to the settings.
+      $audio_attributes = new Attribute();
+      foreach (array('controls', 'autoplay', 'loop') as $attribute) {
+        if ($this->getSetting($attribute)) {
+          $audio_attributes->setAttribute($attribute, $attribute);
+        }
+      }
+      foreach ($source_files as $delta => $files) {
+        $elements[$delta] = array(
+          '#theme' => 'file_audio',
+          '#attributes' => $audio_attributes,
+          '#files' => $files,
+        );
+
+        foreach ($files as $file) {
+          $this->renderer->addCacheableDependency($elements[$delta], $file['file']);
+        }
+      }
+    }
+
+    return $elements;
+  }
+
+}
diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatter.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatter.php
new file mode 100644
index 0000000000..86eaf2893b
--- /dev/null
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileMediaFormatter.php
@@ -0,0 +1,153 @@
+<?php
+
+namespace Drupal\file\Plugin\Field\FieldFormatter;
+
+use Drupal\Core\Field\EntityReferenceFieldItemListInterface;
+use Drupal\Core\Field\FieldDefinitionInterface;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\Core\Template\Attribute;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Symfony\Component\HttpFoundation\File\MimeType\MimeTypeGuesserInterface;
+
+/**
+ * Base class for media file formatter.
+ */
+abstract class FileMediaFormatter extends FileFormatterBase {
+
+  /**
+   * The applicable mimetype for a formatter.
+   */
+  const APPLICABLE_MIME_TYPE = FALSE;
+
+
+  /**
+   * The renderer service.
+   *
+   * @var \Drupal\Core\Render\RendererInterface
+   */
+  protected $renderer;
+
+  /**
+   * Constructs a FileMediaFormatter instance.
+   *
+   * @param string $plugin_id
+   *   The plugin_id for the formatter.
+   * @param mixed $plugin_definition
+   *   The plugin implementation definition.
+   * @param \Drupal\Core\Field\FieldDefinitionInterface $field_definition
+   *   The definition of the field to which the formatter is associated.
+   * @param array $settings
+   *   The formatter settings.
+   * @param string $label
+   *   The formatter label display setting.
+   * @param string $view_mode
+   *   The view mode.
+   * @param array $third_party_settings
+   *   Any third party settings settings.
+   * @param \Drupal\Core\Render\RendererInterface $renderer
+   *   The rendered service.
+   */
+  public function __construct($plugin_id, $plugin_definition, FieldDefinitionInterface $field_definition, array $settings, $label, $view_mode, array $third_party_settings, RendererInterface $renderer) {
+    parent::__construct($plugin_id, $plugin_definition, $field_definition, $settings, $label, $view_mode, $third_party_settings);
+    $this->renderer = $renderer;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    return new static(
+      $plugin_id,
+      $plugin_definition,
+      $configuration['field_definition'],
+      $configuration['settings'],
+      $configuration['label'],
+      $configuration['view_mode'],
+      $configuration['third_party_settings'],
+      $container->get('renderer')
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function isApplicable(FieldDefinitionInterface $field_definition) {
+
+    /** @var MimeTypeGuesserInterface $extensionMimeTypeGuesser */
+    $extensionMimeTypeGuesser = \Drupal::service('file.mime_type.guesser.extension');
+
+    $extensionList = array_filter(explode(' ', $field_definition->getSetting('file_extensions')));
+
+    $applicable = FALSE;
+    foreach ($extensionList as $extension) {
+
+      $mimeType = $extensionMimeTypeGuesser->guess('fakedFile.' . $extension);
+
+      if (static::getMimeTypeType($mimeType) == static::APPLICABLE_MIME_TYPE) {
+        $applicable = TRUE;
+      }
+    }
+
+    return parent::isApplicable($field_definition) && $applicable;
+  }
+
+  /**
+   * Returns the first part of the mimetype of the file.
+   *
+   * @param string $mimeType
+   *   The full mimeType.
+   *
+   * @return string
+   *   The last part of a mimetype.
+   */
+  public static function getMimeTypeType($mimeType) {
+    list($type) = explode('/', $mimeType, 2);
+    return $type;
+  }
+
+  /**
+   * Gets source files with attributes.
+   *
+   * @param \Drupal\Core\Field\EntityReferenceFieldItemListInterface $items
+   *   The item list.
+   * @param string $langcode
+   *   The language code of the referenced entities to display.
+   *
+   * @return array
+   *   List of files.
+   */
+  protected function getSourceFiles(EntityReferenceFieldItemListInterface $items, $langcode) {
+
+    $source_files = [];
+    $multiple_file_behavior = $this->getSetting('multiple_file_behavior');
+
+    // Because we can have the files grouped in a single media tag, we do a
+    // grouping in case the multiple file behavior is not 'tags'.
+    foreach ($this->getEntitiesToView($items, $langcode) as $file) {
+
+      if (static::getMimeTypeType($file->getMimeType()) == static::APPLICABLE_MIME_TYPE) {
+
+        $source_attributes = new Attribute();
+        $source_attributes->setAttribute('src', file_create_url($file->getFileUri()));
+        $source_attributes->setAttribute('type', $file->getMimeType());
+        if ($multiple_file_behavior == 'tags') {
+          $source_files[] = array(
+            array(
+              'file' => $file,
+              'source_attributes' => $source_attributes
+            )
+          );
+        }
+        else {
+          $source_files[0][] = array(
+            'file' => $file,
+            'source_attributes' => $source_attributes
+          );
+        }
+      }
+    }
+
+    return $source_files;
+  }
+
+}
diff --git a/core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php b/core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php
new file mode 100644
index 0000000000..f34dec597d
--- /dev/null
+++ b/core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace Drupal\file\Plugin\Field\FieldFormatter;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Template\Attribute;
+
+/**
+ * Plugin implementation of the 'file_video' formatter.
+ *
+ * @FieldFormatter(
+ *   id = "file_video",
+ *   label = @Translation("Video"),
+ *   description = @Translation("Render the file using an HTML5 video tag."),
+ *   field_types = {
+ *     "file"
+ *   }
+ * )
+ */
+class FileVideoFormatter extends FileMediaFormatter implements ContainerFactoryPluginInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  const APPLICABLE_MIME_TYPE = 'video';
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+
+    return array(
+      'controls' => TRUE,
+      'autoplay' => FALSE,
+      'loop' => FALSE,
+      'muted' => FALSE,
+      'width' => NULL,
+      'height' => NULL,
+      'multiple_file_behavior' => 'tags',
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element['controls'] = array(
+      '#title' => $this->t('Show video controls'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('controls'),
+    );
+    $element['autoplay'] = array(
+      '#title' => $this->t('Autoplay'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('autoplay'),
+    );
+    $element['loop'] = array(
+      '#title' => $this->t('Loop'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('loop'),
+    );
+    $element['muted'] = array(
+      '#title' => $this->t('Muted'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('muted'),
+    );
+    $element['width'] = array(
+      '#type' => 'textfield',
+      '#title' => $this->t('Width'),
+      '#default_value' => $this->getSetting('width'),
+      '#size' => 5,
+      '#maxlength' => 5,
+      '#field_suffix' => $this->t('pixels'),
+    );
+    $element['height'] = array(
+      '#type' => 'textfield',
+      '#title' => $this->t('Height'),
+      '#default_value' => $this->getSetting('height'),
+      '#size' => 5,
+      '#maxlength' => 5,
+      '#field_suffix' => $this->t('pixels'),
+    );
+    $element['multiple_file_behavior'] = array(
+      '#title' => $this->t('Display of multiple files'),
+      '#type' => 'radios',
+      '#options' => array(
+        'tags' => $this->t('Use multiple @tag tags, each with a single source.', array('@tag' => '<video>')),
+        'sources' => $this->t('Use multiple sources within a single @tag tag.', array('@tag' => '<video>')),
+      ),
+      '#default_value' => $this->getSetting('multiple_file_behavior'),
+    );
+
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = array();
+    $summary[] = $this->t('Controls: %controls', array('%controls' => $this->getSetting('controls') ? $this->t('visible') : $this->t('hidden')));
+    $summary[] = $this->t('Autoplay: %autoplay', array('%autoplay' => $this->getSetting('autoplay') ? $this->t('yes') : $this->t('no')));
+    $summary[] = $this->t('Loop: %loop', array('%loop' => $this->getSetting('loop') ? $this->t('yes') : $this->t('no')));
+    $summary[] = $this->t('Muted: %muted', array('%muted' => $this->getSetting('muted') ? $this->t('yes') : $this->t('no')));
+    $width = $this->getSetting('width');
+    $height = $this->getSetting('height');
+    if ($width && $height) {
+      $summary[] = $this->t('Size: %width x %height pixels', array(
+        '%width' => $this->getSetting('width'),
+        '%height' => $this->getSetting('height'),
+      ));
+    }
+    $summary[] = $this->t('Multiple files: %multiple', array('%multiple' => $this->getSetting('multiple_file_behavior')));
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $elements = array();
+
+    $source_files = $this->getSourceFiles($items, $langcode);
+
+    if (!empty($source_files)) {
+      // Prepare the video attributes according to the settings.
+      $video_attributes = new Attribute();
+      foreach (array('controls', 'autoplay', 'loop', 'muted') as $attribute) {
+        if ($this->getSetting($attribute)) {
+          $video_attributes->setAttribute($attribute, $attribute);
+        }
+      }
+      $width = $this->getSetting('width');
+      $height = $this->getSetting('height');
+      if ($width && $height) {
+        $video_attributes->setAttribute('width', $width);
+        $video_attributes->setAttribute('height', $height);
+      }
+      foreach ($source_files as $delta => $files) {
+        $elements[$delta] = array(
+          '#theme' => 'file_video',
+          '#attributes' => $video_attributes,
+          '#files' => $files,
+        );
+        foreach ($files as $file) {
+          $this->renderer->addCacheableDependency($elements[$delta], $file['file']);
+        }
+      }
+    }
+
+    return $elements;
+  }
+
+}
diff --git a/core/modules/file/templates/file-audio.html.twig b/core/modules/file/templates/file-audio.html.twig
new file mode 100644
index 0000000000..c98725b99b
--- /dev/null
+++ b/core/modules/file/templates/file-audio.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as an audio tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   audio tag.
+* - files: And array of files to be added as sources for the audio tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+<audio {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</audio>
diff --git a/core/modules/file/templates/file-video.html.twig b/core/modules/file/templates/file-video.html.twig
new file mode 100644
index 0000000000..162fd4933e
--- /dev/null
+++ b/core/modules/file/templates/file-video.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as a video tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   video tag.
+* - files: And array of files to be added as sources for the video tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+<video {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</video>
diff --git a/core/modules/file/tests/src/Kernel/Formatter/FileAudioFormatterTest.php b/core/modules/file/tests/src/Kernel/Formatter/FileAudioFormatterTest.php
new file mode 100644
index 0000000000..b6b0e002ae
--- /dev/null
+++ b/core/modules/file/tests/src/Kernel/Formatter/FileAudioFormatterTest.php
@@ -0,0 +1,146 @@
+<?php
+
+namespace Drupal\Tests\file\Kernel\Formatter;
+
+use Drupal\Component\Utility\Unicode;
+use Drupal\Core\Entity\Entity\EntityViewDisplay;
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\entity_test\Entity\EntityTest;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\file\Entity\File;
+use Drupal\KernelTests\KernelTestBase;
+
+/**
+ * @coversDefaultClass \Drupal\file\Plugin\Field\FieldFormatter\FileAudioFormatter
+ * @group file
+ */
+class FileAudioFormatterTest extends KernelTestBase {
+
+  /**
+   * The entity type.
+   *
+   * @var string
+   */
+  protected $entityType;
+
+  /**
+   * The bundle type.
+   *
+   * @var string
+   */
+  protected $bundle;
+
+  /**
+   * The field name.
+   *
+   * @var string
+   */
+  protected $fieldName;
+
+  /**
+   * The view display.
+   *
+   * @var \Drupal\Core\Entity\Display\EntityViewDisplayInterface
+   */
+  protected $display;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = [
+    'entity_test',
+    'field',
+    'file',
+    'user',
+    'system',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $this->installConfig(['field']);
+    $this->installEntitySchema('entity_test');
+    $this->installEntitySchema('file');
+    $this->installSchema('file', array('file_usage'));
+
+    $this->entityType = 'entity_test';
+    $this->bundle = $this->entityType;
+    $this->fieldName = Unicode::strtolower($this->randomMachineName());
+
+    FieldStorageConfig::create(array(
+      'entity_type' => $this->entityType,
+      'field_name' => $this->fieldName,
+      'type' => 'file',
+      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
+    ))->save();
+    FieldConfig::create([
+      'entity_type' => $this->entityType,
+      'field_name' => $this->fieldName,
+      'bundle' => $this->bundle,
+      'settings' => [
+        'file_extensions' => 'mp3',
+      ],
+    ])->save();
+
+    $this->display = EntityViewDisplay::create([
+      'targetEntityType' => $this->entityType,
+      'bundle' => $this->bundle,
+      'mode' => 'default',
+      'content' => [],
+    ]);
+    $this->display->setComponent($this->fieldName, [
+      'type' => 'file_audio',
+      'settings' => [],
+    ]);
+    $this->display->save();
+
+  }
+
+  /**
+   * @covers ::viewElements
+   */
+  public function testRender() {
+
+    file_put_contents('public://file.mp3', str_repeat('t', 10));
+    $file = File::create([
+      'uri' => 'public://file.mp3',
+      'filename' => 'file.mp3',
+    ]);
+    $file->save();
+
+    $entity = EntityTest::create([
+      $this->fieldName => [
+        [
+          'target_id' => $file->id(),
+        ],
+      ],
+    ]);
+    $entity->save();
+
+    $build = $this->display->build($entity);
+
+    \Drupal::service('renderer')->renderRoot($build);
+
+    $src = file_create_url($file->getFileUri());
+
+    $expected_output = <<<EXPECTED
+
+  <div>
+    <div>$this->fieldName</div>
+          <div>
+              <div><audio  controls="controls">
+      <source  src="$src" type="audio/mpeg" />
+  </audio>
+</div>
+              </div>
+      </div>
+
+EXPECTED;
+    $this->assertEquals($expected_output, $build[$this->fieldName]['#markup']);
+  }
+
+}
diff --git a/core/modules/file/tests/src/Kernel/Formatter/FileVideoFormatterTest.php b/core/modules/file/tests/src/Kernel/Formatter/FileVideoFormatterTest.php
new file mode 100644
index 0000000000..6b7d2512dd
--- /dev/null
+++ b/core/modules/file/tests/src/Kernel/Formatter/FileVideoFormatterTest.php
@@ -0,0 +1,146 @@
+<?php
+
+namespace Drupal\Tests\file\Kernel\Formatter;
+
+use Drupal\Component\Utility\Unicode;
+use Drupal\Core\Entity\Entity\EntityViewDisplay;
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\entity_test\Entity\EntityTest;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\file\Entity\File;
+use Drupal\KernelTests\KernelTestBase;
+
+/**
+ * @coversDefaultClass \Drupal\file\Plugin\Field\FieldFormatter\FileVideoFormatter
+ * @group file
+ */
+class FileVideoFormatterTest extends KernelTestBase {
+
+  /**
+   * The entity type.
+   *
+   * @var string
+   */
+  protected $entityType;
+
+  /**
+   * The bundle type.
+   *
+   * @var string
+   */
+  protected $bundle;
+
+  /**
+   * The field name.
+   *
+   * @var string
+   */
+  protected $fieldName;
+
+  /**
+   * The view display.
+   *
+   * @var \Drupal\Core\Entity\Display\EntityViewDisplayInterface
+   */
+  protected $display;
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = [
+    'entity_test',
+    'field',
+    'file',
+    'user',
+    'system',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $this->installConfig(['field']);
+    $this->installEntitySchema('entity_test');
+    $this->installEntitySchema('file');
+    $this->installSchema('file', array('file_usage'));
+
+    $this->entityType = 'entity_test';
+    $this->bundle = $this->entityType;
+    $this->fieldName = Unicode::strtolower($this->randomMachineName());
+
+    FieldStorageConfig::create(array(
+      'entity_type' => $this->entityType,
+      'field_name' => $this->fieldName,
+      'type' => 'file',
+      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
+    ))->save();
+    FieldConfig::create([
+      'entity_type' => $this->entityType,
+      'field_name' => $this->fieldName,
+      'bundle' => $this->bundle,
+      'settings' => [
+        'file_extensions' => 'mp4',
+      ],
+    ])->save();
+
+    $this->display = EntityViewDisplay::create([
+      'targetEntityType' => $this->entityType,
+      'bundle' => $this->bundle,
+      'mode' => 'default',
+      'content' => [],
+    ]);
+    $this->display->setComponent($this->fieldName, [
+      'type' => 'file_video',
+      'settings' => [],
+    ]);
+    $this->display->save();
+
+  }
+
+  /**
+   * @covers ::viewElements
+   */
+  public function testRender() {
+
+    file_put_contents('public://file.mp4', str_repeat('t', 10));
+    $file = File::create([
+      'uri' => 'public://file.mp4',
+      'filename' => 'file.mp4',
+    ]);
+    $file->save();
+
+    $entity = EntityTest::create([
+      $this->fieldName => [
+        [
+          'target_id' => $file->id(),
+        ],
+      ],
+    ]);
+    $entity->save();
+
+    $build = $this->display->build($entity);
+
+    \Drupal::service('renderer')->renderRoot($build);
+
+    $src = file_create_url($file->getFileUri());
+
+    $expected_output = <<<EXPECTED
+
+  <div>
+    <div>$this->fieldName</div>
+          <div>
+              <div><video  controls="controls">
+      <source  src="$src" type="video/mp4" />
+  </video>
+</div>
+              </div>
+      </div>
+
+EXPECTED;
+    $this->assertEquals($expected_output, $build[$this->fieldName]['#markup']);
+  }
+
+}
diff --git a/core/themes/classy/templates/field/file-audio.html.twig b/core/themes/classy/templates/field/file-audio.html.twig
new file mode 100644
index 0000000000..f573e32d46
--- /dev/null
+++ b/core/themes/classy/templates/field/file-audio.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as an audio tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   audio tag.
+* - files: And array of files to be added as sources for the audio tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+{{ attach_library('classy/file') }}
+<audio {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</audio>
diff --git a/core/themes/classy/templates/field/file-video.html.twig b/core/themes/classy/templates/field/file-video.html.twig
new file mode 100644
index 0000000000..88ab05bbc2
--- /dev/null
+++ b/core/themes/classy/templates/field/file-video.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as a video tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   video tag.
+* - files: And array of files to be added as sources for the video tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+{{ attach_library('classy/file') }}
+<video {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</video>
diff --git a/core/themes/stable/templates/field/file-audio.html.twig b/core/themes/stable/templates/field/file-audio.html.twig
new file mode 100644
index 0000000000..c98725b99b
--- /dev/null
+++ b/core/themes/stable/templates/field/file-audio.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as an audio tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   audio tag.
+* - files: And array of files to be added as sources for the audio tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+<audio {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</audio>
diff --git a/core/themes/stable/templates/field/file-video.html.twig b/core/themes/stable/templates/field/file-video.html.twig
new file mode 100644
index 0000000000..162fd4933e
--- /dev/null
+++ b/core/themes/stable/templates/field/file-video.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as a video tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   video tag.
+* - files: And array of files to be added as sources for the video tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+<video {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</video>