如何使用音频或视频将SRC放在附加的html中？

debugcn 发表于 Dev

shadow_blade

我正在尝试将源文件添加为mp3或html中的视频。

因此，如果用户在选择选项中选择“音频”。我的html将为视频附加一个音频src html。

这是我的例子。

  $(document).ready(function() {
     
    var previewBox = document.getElementById("myAudio");
    
    $("#photo").change(function(event) {
      tmppath = URL.createObjectURL(event.target.files[0]);
      previewBox.src = URL.createObjectURL(event.target.files[0]);
      $(this).removeAttr("disabled");
    });
  
    $("#component_type").change(function () {

        var component_value = $("#component_type :selected").val();

        if (component_value == 0) {
          $('#audio_preview').empty();
          $("#audio_preview").append(
             '<audio controls id="myAudio" preload="metadata"> '+
              '<source id = "myAudioSrc" src="" >' +
              'Your browser does not support the audio element.'+
             '</audio>'
           );
         }else if (component_value == 1) {
          $('#audio_preview').empty();
          $("#audio_preview").append(
             '<video controls id="myAudio" preload="metadata"> '+
              '<source id = "myAudioSrc" src="" >' +
              'Your browser does not support the audio element.'+
             '</video>'
           );
        }else{
          console.log("Wala to");
        }

    });
    
});

<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
    
    <div class="form-body">
        <div class="form-group">
            <label class="control-label col-md-3" id="label-photo">Upload</label>
            <div class="col-md-9">
                <input id="photo" name="photo" required="required" type="file" class="form-control upload_valid" accept="audio/mpeg3">
                <span id="upload_warning" class="help-block"></span>
            </div>
        </div>
    </div>

    <div class="col-md-9">
      <select name= "component_type" class="form-control" id="component_type">
        <option value="" selected disabled>Choose Set</option>
        <option value="0" >Audio</option>
        <option value="1" >Video</option>
      </select>
        <span class="help-block"></span>
    </div>
    
    <div class="form-group" id="audio-preview">
      <div class="form-group">
        <div id="audio_preview">
          <audio controls id="myAudio" preload="metadata">
            <source id = "myAudioSrc" src="" >
            Your browser does not support the audio element.
          </audio>
        </div>
      </div>
    </div>
</div>
</body>
</html>

我的目标是，当用户选择“音频输入”时，选择该用户上传的文件时，它应该具有该用户上传内容的预览。与Video相同，因此，如果用户选择Video，则html表单应删除Audio html并将其更改为Video html，以便用户可以预览视频。

追加音频或视频后，如何使它成为源？有没有办法做到这一点？

罗里·麦克罗森（Rory McCrossan）

您不需要用户选择文件类型，就可以从所选文件的MIME类型中检测到它。如果是音频文件，则可以创建一个<audio />元素并开始播放，并且对<video />元素也是如此。

下面分别适用于mp3和mp4文件，可能也适用于其他文件，但这就是我所要做的。

$(document).ready(function() {
  $("#photo").change(function(event) {
    let file = this.files[0];
    let mime = file.type;
    
    let $player;
    if (/^audio/.test(mime)) { // audio
      $player = $('<audio autoplay controls />');
    } else if (/^video/.test(mime)) { // video
      $player = $('<video autoplay />');
    } else {
      console.log('Invalid file selected...');
      return;
    }
    
    $('#preview').empty().append($player);
    $player[0].src = URL.createObjectURL(file);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="form-group">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3" id="label-photo">Upload</label>
      <div class="col-md-9">
        <input id="photo" name="photo" required="required" type="file" class="form-control upload_valid" accept="audio/*, video/*">
        <span id="upload_warning" class="help-block"></span>
      </div>
    </div>
  </div>

  <div class="form-group" id="preview"></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。