HTML5+JavaScript实现本地视频/音频播放器

HTML5 提供了本地视频和音频播放器的支持，通过 <video> 和 <audio> 标签，这些标签支持多种媒体格式，并且可以通过 JavaScript 进行控制，实现功能比较完整的本地视频音频播放器。

HTML5的<video>和<audio>标签是HTML5中新增的两个标签，分别用于在网页播放视频和音频内容。<video>标签主要用于播放视频，同时也支持播放音频。<audio>标签主要用于播放音频，不支持播放视频。

本地视频/音频播放器

使用HTML5的<video>标签实现本地视频/音频播放器

运行效果

源码如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>本地视频/音频播放器</title>  <style>  /* 样式可以根据需要自定义 */  #video-player {  width: 640px;  height: 360px;  }  #controls {  margin-top: 10px;  }  </style>  
</head>  
<body>  <video id="video-player" controls>  您的浏览器不支持 Video 标签。  </video>  <div id="controls">  <input type="file" id="file-input" accept="video/*, audio/*">  <button id="play-video">播放</button>  </div>  <script>  const videoPlayer = document.getElementById('video-player');  const fileInput = document.getElementById('file-input');  const playVideoButton = document.getElementById('play-video');  fileInput.addEventListener('change', function() {  const file = this.files[0];  if (file) {  const reader = new FileReader();  reader.onload = function(e) {  // 创建URL对象  const url = URL.createObjectURL(file);  // 设置视频源  videoPlayer.src = url;  };  // 读取文件内容  reader.readAsDataURL(file);  }  });  playVideoButton.addEventListener('click', function() {  if (videoPlayer.readyState >= 3) { // 确保视频已经加载完毕  videoPlayer.play();  } else {  alert('视频还未加载完毕，请稍后再试。');  }  });  </script>  
</body>  
</html>

使用HTML5的<video>标签实现功能本地视频/音频播放器比较精炼。

其中<input type="file" id="file-input" accept="video/*, audio/*"> 是一个HTML的输入元素，用于让用户从其计算机中选择一个或多个文件。

<input type="file">: 这告诉浏览器这是一个文件输入字段，用户可以通过点击它来选择文件。

id="file-input": 这是一个唯一的标识符，用于在JavaScript中引用这个元素。通过这个ID，你可以添加事件监听器、获取用户选择的文件等。

accept="video/*, audio/*": 这是一个属性，用于限制用户可以选择的文件类型。accept 属性的语法accept="MIME_type/subtype"：指定一种文件类型。MIME（Multipurpose Internet Mail Extensions）类型是一种标识文档、文件或字节流的性质和格式的标准。它由两部分组成：类型（如 text、image、audio、video 等）和子类型（具体的文件格式，如 html、jpeg、mp3 等）。可以指定多个值，用逗号分隔，如本句；可以使用星号（*）作为通配符，如表示接受所有视频格式。如果你只想接受特定格式的视频，比如MP4，你可以使用 accept="video/mp4"。

更多示例：

如果你想让用户选择所有类型的图像文件，你可以使用通配符：

如果你想让用户只能选择GIF和JPEG图像文件，你可以这样写：

本地音频播放器

使用HTML5的<audio>标签实现本地音频播放器

先给出运行效果：

源码如下：

<html lang="en">  
<head>  <meta charset="UTF-8">  <title>本地音频播放器</title>  <style>  /* 样式可以根据需要自定义 */  #audio-player {  width: 620px;  height: 160px;  }  #controls {  margin-top: 10px;  }  </style>  
</head>  
<body>  <audio id="audio-player" controls>  您的浏览器不支持 audio 标签。  </audio>  <div id="controls">  <input type="file" id="file-input" accept="audio/*">  <button id="play-audio">播放</button>  </div>  <script>  const audioPlayer = document.getElementById('audio-player');  const fileInput = document.getElementById('file-input');  const playAudioButton = document.getElementById('play-audio');  fileInput.addEventListener('change', function() {  const file = this.files[0];  if (file) {  const reader = new FileReader();  reader.onload = function(e) {  // 创建URL对象  const url = URL.createObjectURL(file);  // 设置视频源  audioPlayer.src = url;  };  // 读取文件内容  reader.readAsDataURL(file);  }  });  playAudioButton.addEventListener('click', function() {  if (audioPlayer.readyState >= 3) { // 确保视频已经加载完毕  audioPlayer.play();  } else {  alert('视频还未加载完毕，请稍后再试。');  }  });  </script>  
</body>  
</html>

附录

HTML5超级链接、图片与多媒体https://blog.csdn.net/cnds123/article/details/113782944

使用HTML和JavaScript实现用打开窗口播放本地的媒体(视频音频)文件https://blog.csdn.net/cnds123/article/details/113835795

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/298.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！