如何使用音频或视频将 SRC 放入 append html 中？
[英]How can I put SRC in a append html using Audio or Video?
问题描述
I am trying to append a source file either it is a mp3 or video in a html.
我正在尝试 append 源文件，它是 html 中的 mp3 或视频。
so if the user select Audio in the select option.所以如果用户 select Audio 在 select 选项中。 my html will append a audio src html same for the video.我的 html 将 append 音频源 html 与视频相同。
Here is my example.这是我的例子。
$(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>
My goal is when the user choose Audio in select the user uploaded a file it should have a preview about what the user uploaded.我的目标是当用户在 select 中选择音频时，用户上传了一个文件，它应该预览用户上传的内容。 same for the Video, so if the user choose Video, the html form should remove the Audio html and change it to Video html so that the user can preview the video.视频也一样，所以如果用户选择视频，html 表单应该删除音频 html 并将其更改为视频 html 以便用户可以预览视频。
How can I make my audio or video to be on source when it is on append?当我的音频或视频在 append 上时，如何使我的音频或视频成为源？ is there a way to do this?有没有办法做到这一点？
2 个解决方案
解决方案1
1 已采纳 2021-03-02 15:15:11
You don't need to have the user select the file type, you can detect it from the MIME type of the selected file.您不需要用户 select 文件类型，您可以从所选文件的 MIME 类型中检测它。 If it's an audio file then you can create an <audio /> element and begin playback and the same for a <video /> element.如果它是一个音频文件，那么您可以创建一个<audio />元素并开始播放，对于<video />元素也是如此。
The below works well with mp3 and mp4 files respectively, and probably others too, but that's all I have to hand.以下分别适用于 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>
解决方案2
0 2021-03-02 15:21:02
You can do simply this:你可以这样做：
let video_audio = {
audio: document.getElementById('audio'),
video: document.getElementById('video')
}
video_audio.audio.style.display = "none"
video_audio.video.style.display = "none"
function play_audio () {
video_audio.audio.style.display = ""
video_audio.video.style.display = "none"
video_audio.video.currentTime = 0
video_audio.audio.currentTime = 0
video_audio.audio.play()
video_audio.video.pause()
}
function play_video () {
video_audio.video.style.display = ""
video_audio.audio.style.display = "none"
video_audio.video.currentTime = 0
video_audio.audio.currentTime = 0
video_audio.video.play()
video_audio.audio.pause()
}
<table>
<tbody>
<tr>
<td><button onclick="play_audio()">Audio</button></td>
<td><button onclick="play_video()">Video</button></td>
</tr>
</tbody>
</table>
<video controls width="250" id="video"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"></video>
<audio id="audio" controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
If you want to change the src file you just need to change the src from html.如果要更改 src 文件，只需将 src 从 html 更改。 If your file can't be accessible directly with a path you should said it.如果您的文件无法通过路径直接访问，您应该说出来。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.