首页 > 其他分享 >低配版播放器(播放本地视频)

低配版播放器(播放本地视频)

时间:2023-02-21 18:36:32浏览次数:48  
标签:播放器 document const 低配 getElementById video file 播放

1.html和javascript混合代码:本地直接打开即可。

<!DOCTYPE html>
<html>
  <head>
    <title>Local Video Player</title>
  </head>
  <body>
    <input type="file" id="inputVideo" accept="video/*">
    <video id="myVideo" controls>
      <source id="videoSource" type="video/mp4">
    </video>

    <script>
      const input = document.getElementById('inputVideo');
      const video = document.getElementById('myVideo');
      const source = document.getElementById('videoSource');

      input.addEventListener('change', function(event) {
        const file = this.files[0];
        const url = URL.createObjectURL(file);
        source.setAttribute('src', url);
        video.load();
      });
    </script>
  </body>
</html>

 

标签:播放器,document,const,低配,getElementById,video,file,播放
From: https://www.cnblogs.com/eisenshu/p/17141993.html

相关文章

  • 关于H5播放器SkeyeWebPlayer断线重连问题
    1、SkeyeWebPlayer视频直播、点播H5播放器:(1)、支持m3u8播放;(2)、支持HTTP-FLV播放;(3)、支持直播和点播播放;(4)、支持全屏或比例显示;(5)、支持播放器快照截图;2、SkeyeWebPlayer会......
  • 虚幻引擎UE4如何实现打包后播放片头?其实超简单!
    虚幻引擎作为一款全球性的3D实时开发工具,不仅在游戏行业,其在建筑、影视、医疗等行业也被广泛使用。作为开发人员,有时开发的UE虚幻引擎项目比较大,开始运行项目时需要等待较......
  • 视频直播、点播H5如何自适应div宽高播放视频
    ####1、根据div宽高自适应显示播放######(1)、通过设置播放器容器的样式,来使播放器宽高自适应<style>.web-media-player{position:relative;width:500......
  • go语言简单播放音频
    代码来自github官网上的api使用案例,编写过程中外部包无法导入,爆红,在终端开启代理导入即可。你可能会遇到os.open文件无法找到的问题,放入项目根目录即可,或者放入你新建的......
  • 通过flask完成web实时播放视频
    defgen():r=redis.StrictRedis(host=REDIS_HOST,port=REDIS_PORT,db=REDIS_DB,password=PASS_WORD)whileTrue:try:#print(r.get(......
  • H.264:FFMpeg 实现简单的播放器
    FFMPEG工程浩大,可以参考的书籍又不是很多,因此很多刚学习FFMPEG的人常常感觉到无从下手。我刚接触FFMPEG的时候也感觉不知从何学起。因此我把自己做项目过程中实现的一个非......
  • .NET 中创建录音机和播放器应用
    前言在本博客中,你将了解如何在.NETMAUI中开发录音机和播放器。音频播放器将录制和播放音频文件。此应用程序可以在Android和iOS上部署和使用。预览以下是该录音机和......
  • 实践:基于腾讯云播放器SDK,带您体验播放多场景下的 COS 视频文件
    一.实践步骤1.准备您的腾讯云COS视频文件链接,您需要:1.1创建一个存储桶;1.2上传对象;1.3在对象信息详情里复制对象地址;注意:    目前腾讯云......
  • 实践:带您用多种姿势将存储在腾讯云COS 上的视频播放
    导语随着5G时代的到来,短视频/直播行业开始流行,音视频逐渐成为信息传播中流量占比最大的部分。腾讯云对象存储(COS)作为可容纳海量数据且支持HTTP/HTTPS协议访问的分布式存......
  • WPF中使用LibVLCSharp.WPF 播放rtsp
    目录LibVLCSharp.WPF简介vlc:VideoView基本使用安装LibVLC播放rtsp引入命名空间xaml代码cs代码截图概述代码示例vlc:VideoView进阶使用空域问题......