手把手教你用video实现视频播放功能

7月前作者：呆呆加油呀分类：Toy博客阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了手把手教你用video实现视频播放功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

哈喽。大家好啊

今天需要做一个视频播放列表，让我想到了video的属性下面让我们先看看实现效果

video显示播放按钮,video视频播放,音视频

这里下载播放速度画中画是video里面自带的

这里是我的代码

<video [src]="videoLink" 
    width="100%" 
    height="100%" 
    controls 
    autoplay="true" 
    [poster]="thumbnail" 
    preload="auto" 
    loop="true">
  </video>

width是当前播放页面的宽度

height是当前播放页面的高度

Controls属性用就是控制栏那些了比如播放按钮暂停按钮

autoplay是指的是自动播放

poster是指的是初始化进来以及视频在播放中以及加载失败展示的预览图此处是一个图片链接

preload是预加载资源

loop就是是否循环了是一个boolean值
文章来源地址https://www.toymoban.com/news/detail-517546.html

到了这里，关于手把手教你用video实现视频播放功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

快收藏！手把手教你用AI绘画

点个关注👆跟腾讯工程师学技术最近看到一篇有趣的文章，一副名为《太空歌剧院》（如下图）的艺术品在某美术比赛上，获得了第一名的成绩，有意思的是这件作品是通过AI来实现的画作，顿时觉得非常神奇。结合近期科技媒体频频报道的AI作画爆火现象，深入了解了下

2024年02月09日
浏览(27)
手把手教你用 Jenkins 自动部署 SpringBoot

CI/CD 是一种通过在应用开发阶段引入自动化来频繁向客户交付应用的方法。 CI/CD 的核心概念可以总结为三点：持续集成持续交付持续部署 CI/CD 主要针对在集成新代码时所引发的问题（俗称\\\"集成地狱\\\"）。为什么会有集成地狱这个“雅称”呢？大家想想我们一个项目部署的

2024年02月02日
浏览(37)
手把手教你用Python编写邮箱脚本引擎

版权声明：原创不易，本文禁止抄袭、转载需附上链接，侵权必究！邮箱是传输信息方式之一，个人，企业等都在使用，朋友之间发消息，注册/登录信息验证，订阅邮箱，企业招聘，向客户发送消息等都是邮箱的使用场景；邮箱有两个较重要的协议：SMTP和POP3，均位于OSI7层

2024年02月06日
浏览(30)
手把手教你用jmeter做压力测试（详图）

压力测试是每一个Web应用程序上线之前都需要做的一个测试，他可以帮助我们发现系统中的瓶颈问题，减少发布到生产环境后出问题的几率；预估系统的承载能力，使我们能根据其做出一些应对措施。所以压力测试是一个非常重要的步骤，下面我带大家来使用一款压力测试工

2024年02月02日
浏览(36)
手把手教你用git上传项目到GitHub

github的官方网址：https://github.com ，如果没有账号，赶紧注册一个。点击Sign in进入登录界面，输入账号和密码登入github。创建成功可以看到自己的仓库地址，如此，我的远程免费的仓库就创建了。它还介绍了github仓库的常用指令。这个指令需要在本地安装git客户端。 Git是目

2024年01月18日
浏览(37)
手把手教你用Git——详解git merge

关于本教程的编写环境本文基于 Windows10系统， Mac 系统的小伙伴可以尝试 Homebrew 。由于本人手里并没有搭载 MacOS 的电脑，因此 Homebrew 相关的使用请自行尝试。对于使用 Windows11系统的小伙伴，本文的教程是通用的，不过一些细节可能略有不同，这点希望小伙伴们注意一下

2024年02月05日
浏览(36)
手把手教你用MindSpore训练一个AI模型！

首先我们要先了解深度学习的概念和AI计算框架的角色（ https://zhuanlan.zhihu.com/p/463019160 ），本篇文章将演示怎么利用MindSpore来训练一个AI模型。和上一章的场景一致，我们要训练的模型是用来对手写数字图片进行分类的LeNet5模型请参考（ http://yann.lecun.com/exdb/lenet/ ）。图1 M

2024年02月04日
浏览(37)
手把手教你用UNet做医学图像分割系统

兄弟们好呀，这里是肆十二，这转眼间寒假就要过完了，相信大家的毕设也要准备动手了吧，作为一名大作业区的UP主，也该蹭波热度了，之前关于图像分类和目标检测我们都出了相应的教程，所以这期内容我们搞波新的，我们用Unet来做医学图像分割。我们将会以皮肤病的数

2024年02月03日
浏览(47)
手把手教你用Python编写配置脚本引擎（福利篇）

版权声明：原创不易，本文禁止抄袭、转载需附上链接，侵权必究！配置信息初始化定义配置引擎类和初始化方法，其中有两个属性，配置实例对象及配置文件路径：将配置信息写入到配置文件中，该方法有三个形参，category(配置信息类别)，name(配置字段名称)，value(配置字

2024年02月06日
浏览(45)
手把手教你用 Docker 部署 Vue3 项目

用 docker 可以帮我们快速部署前端项目，本文介绍了如何用 docker 快速部署 vue3 项目。请准备好一台云服务器并安装好 docker，然后开始阅读本教程。执行 npm run build 打包后项目目录中会多出一个 dist 文件夹利用 docker 拉取 nginx 镜像在服务器中创建工作目录，这里我放在 /ho

2024年02月05日
浏览(32)