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

news2024/11/12 10:19:44

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"。

更多示例:

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

<input type="file" name="pic" accept="image/*">

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

<input type="file" name="pic" accept="image/gif, image/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.coloradmin.cn/o/1606407.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTTP/HTTPS详解

HTTP/HTTPS详解 1. HTTP1.1 HTTP基础知识1.2 HTTP建立和断开连接 2. HTTPS 1. HTTP 1.1 HTTP基础知识 HTTP是互联网上应用最为广泛的一种网络协议&#xff0c;是一个客户端和服务器端请求和应答的标准&#xff08;TCP&#xff09;&#xff0c;用 于从WWW服务器传输超文本到本…

Day09 React———— 第九天

ReactRoter 一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候&#xff0c;path 对应的组件会在页面中进行渲染 基础用法 import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router createBrowserRoute…

vue---计算属性

姓名案例 1.使用插值语法实现 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>姓名案例_插值语法实现</title><!-- 引入Vue --><script type"text/javascript" src"../js/vue.js"&g…

北大字节联合发布视觉自动回归建模(VAR):通过下一代预测生成可扩展的图像

北大和字节发布一个新的图像生成框架VAR。首次使GPT风格的AR模型在图像生成上超越了Diffusion transformer。 同时展现出了与大语言模型观察到的类似Scaling laws的规律。在ImageNet 256x256基准上,VAR将FID从18.65大幅提升到1.80,IS从80.4提升到356.4,推理速度提高了20倍。 相…

[MySQL数据库] 索引与事务

1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针.可以对表中的一列或多列创建索引,并指定索引的类型&#xff0c;各类索引有各自的数据结构实现. 1.2 作用 数据库中的表、数据、索引之间的关系&#xff0c;类似于书架上的图书、书籍…

电商平台业务及架构演变史

不少人认为电商系统很简单&#xff0c;因为现在做电商的太多了&#xff0c;看到的电商产品也多。看来看去产品都差不多&#xff0c;没什么特别。 其实中国电商发展已有20多年历史&#xff0c;电商以销售为核心连接着研、产、供、销、服整套的信息系统体系。其中的设计并没有那…

预约小程序新选择:强大后端管理功能一览

拥有一个功能齐全、操作便捷的小程序对于商家来说至关重要。为了满足广大商家的需求&#xff0c;乔拓云平台提供了丰富的模板资源&#xff0c;帮助用户快速搭建预约型小程序&#xff0c;并配备了强大的后端管理功能&#xff0c;让商家能够轻松管理预约订单&#xff0c;提升运营…

Hive进阶(1)----HDFS写入数据流程(赋图助君理解)

HDFS写入数据流程 1.理论流程描述 HDFS&#xff08;Hadoop分布式文件系统&#xff09;的数据写入流程是一个复杂但高效的过程&#xff0c;可以分为以下8个步骤&#xff1a; 1、client(客户端)发起文件上传请求&#xff1b; 2、通过发送RPC请求与NameNode建立通讯。NameNode…

⑥【Shiro】使多个自定义Realm规则生效。

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ ⑥【Shiro】Shiro中&#xff0c;如何使多个自定…

CSS的语法规则——基础选择器

元素&#xff1a; 用法&#xff1a; 标签名&#xff1a;{style的内容} 特点&#xff1a; 全局性&#xff0c;使用后&#xff0c;所有的相同标签都是同一种样式。 举例&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UT…

Docker使用教程及docker部署Vue项目

什么是Docker及其工作原理 虚拟化技术Docker是什么&#xff1f;三大基本术语核心算法原理和具体操作步骤 Docker和传统虚拟化技术区别为什么使用Docker&#xff1f;Docker有什么作用&#xff1f;1.解决应用部署的环境问题遇到问题达到效果 2.容器化 docker的各种命令解释运行机…

pnpm - Failed to resolve loader: cache-loader. You may need to install it.

起因 工作原因需要研究 vue-grid-layout 的源码&#xff0c;于是下载到本地。因为我习惯使用 pnpm&#xff0c;所以直接用 pnpm i 安装依赖&#xff0c;npm run serve 启动失败。折腾了一番没成功。 看到源码里有 yarn.lock&#xff0c;于是重新用 yarn install 安装依赖&…

hbase-2.2.7分布式搭建

一、下载上传解压 1.在官网或者云镜像网站下载jar包 华为云镜像站&#xff1a;Index of apache-local/hbase/2.2.7 2.上传到linux并解压 tar -zxvf hbase-2.2.7-bin.tar.gz -C /usr/locol/soft 二、配置环境变量 1. vim /etc/profile export HBASE_HOME/usr/local/soft/h…

基于大数据的手机销售数据分析可视化系统,爬取京东和淘宝的的手机商品数据进行分析,Flask,Python,数据可视化

介绍 该系统主要是通过爬取京东和淘宝的的手机商品数据进行分析。爬虫python脚本通过打开浏览器授权登录后按照搜索“手机”关键字后出现的商品列表进行爬取&#xff0c;获取标题名&#xff0c;解析付款人数&#xff0c;品牌&#xff0c;评论人数&#xff0c;发货地&#xff0…

Java相关的定时任务

就现在而言&#xff0c;关于定时任务有各种各样的架构&#xff1a;Java 定时器类【Timer】&#xff0c;Spring定时器类【Scheduled】&#xff0c;Quartz分布式定时器类&#xff0c;xxl-job分布式任务调度平台。xxl-job是一款轻量级定时任务可以分布式部署的调度平台。很多大的公…

AIDE:自动驾驶目标检测的自动数据引擎

AIDE&#xff1a;自动驾驶目标检测的自动数据引擎 摘要IntroductionRelated WorksMethodData FeederModel Updater4 Experiments 摘要 自动驾驶车辆&#xff08;AV&#xff09;系统依赖于健壮的感知模型作为安全保证的基石。然而&#xff0c;道路上遇到的物体表现出长尾分布&a…

SpringCloud系列(5)--SpringCloud微服务工程公共部分提取

前言&#xff1a;在上一章节中我们创建了两个个SpringCloud工程&#xff0c;但在两个工程中分别存在着一些重复的部分&#xff0c;例如重复的实体类&#xff08;如图所示&#xff09;&#xff0c;这样会造成系统的冗余&#xff0c;所以我们需要把公共的类提取到一个工程里&…

50.HarmonyOS鸿蒙系统 App(ArkUI)web组件实现简易浏览器

50.HarmonyOS鸿蒙系统 App(ArkUI)web组件实现简易浏览器 配置网络访问权限&#xff1a; 跳转任务&#xff1a; Button(转到).onClick(() > {try {// 点击按钮时&#xff0c;通过loadUrl&#xff0c;跳转到www.example1.comthis.webviewController.loadUrl(this.get_url);} …

docker 启动时报错

docker 启动时报如下错误 Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details 因为安装docker时添加了镜像源 解决方案&#xff1a; mv /etc/…

windows部署pgsql

1、下载&#xff1a;Download PostgreSQL Binaries 2、创建data目录作为数据目录 3、初始化 bin目录执行命令&#xff1a; .\initdb.exe -D E:\pgsql\data -E UTF-8 --localechs -U postgres -W 输入密码直到完成 4、启动数据库 .\pg_ctl.exe -D E:\pgsql\data -l logfil…