video播放视频

最新推荐文章于 2024-06-21 09:47:37 发布
最新推荐文章于 2024-06-21 09:47:37 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： H5 文章标签： 音视频 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43695726/article/details/122211241
版权
该博客介绍了如何使用React来创建一个视频播放器，具备暂停和播放功能，且兼容iOS和Android设备。视频源及预览图片由后台提供，通过videoControl变量控制播放状态。
摘要由CSDN通过智能技术生成

写了一个播放视频的功能，仅仅实现暂停，播放功能。react实现，可兼容ios和Android

  1. 视频路径：videoUrl
  2. 视频展示第一张图片：pictureUrl
  3. 定义一个变量控制，播放暂停：videoControl

videoUrl和pictureUrl的路径都是从后台获取到的，不方便展示

this.state = {
   
    videoUrl: "",  // 视频路径
    pictureUrl: "", // 图片路径
    videoControl: false
}

videoPlay：点击播放按钮
videoPause：点击视频实现暂停

<div className="video-mian">
     {
   this.state.videoControl ? null : <div className={
   "video-controller " + (this.state.videoControl ? "" : 
最低0.47元/天 解锁文章
无情代码机器人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于video弹窗视频播放代码.zip
07-11
使用jQuery video在线视频播放功能。div图片列表鼠标悬停显示视频播放按钮，点击弹窗方式打开mp4视频播放效果代码。默认我们需要配置ipath的视频路径。这是一款简洁好用的弹窗视频播放。
用Video实现视频播放
weixin_44540178的博客
06-17 1万+
大多数人在平时都会选择去观看视频或者听听音乐，但是我们只在乎看和听，有没有人去思考过是谁设计出来的，是怎么实现的。 可能很多人都知道是通过程序实现的，但是程序是怎么实现的，那就只有程序员知道了。 视频和音频的播放： 在HTML5中定义了Video（视频）标签可用于实现视频的播放， 标签也可以在 HTML 页面中嵌入多媒体元素， 标签的也可以是在 HTML 页面中嵌入多媒体元素。 在这里主要使用：V...
视频流播放的几种方式
最新发布
ugbbfjk的博客
06-21 513
video、Aliplayer 、Iframe
浏览器兼容video视频播放的多种方法
zhouzuoluo的博客
07-11 3万+
前言： 在 HTML 中播放视频并不容易！因为直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 比如windows平台的IE浏览器利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。而在HTML5 中规定了一种通过 video 元素来包含视频的标准方法，...
手把手教你用video实现视频播放功能
m0_59157023的博客
11-15 3317
手把手教你用video实现视频播放功能
使用＜video＞播放视频
weixin_44487537的博客
01-08 808
【代码】使用＜video＞播放视频。
html采用video播放hls视频流
10-13
1、本文详细描述了html采用video播放hls视频流的方法及源代码。 2、通过详细示例，让读者更直观地阅读，更清晰的理解。 3、示例代码可直接复制，编译后可直接运行。 4、根据示例以及运行结果，让读者加强记忆及...
video插件实现视频在线播放
12-20
"video插件"是实现网页中视频在线播放的关键技术，尤其在不支持IE8等较旧浏览器的环境下。本文将深入探讨如何利用HTML5的`<video>`标签来创建一个功能完善的视频播放器，以及相关的插件选择和优化策略。 首先，`...
unity3d中AVProVideo播放视频插件
05-25
该插件是unity3d播放视频的插件，移动端、IOS、webgl、PC端都可以使用，包含十几个demo介绍
html5 video视频播放插件
12-29
例如，`videoElement.play()`播放视频，`videoElement.pause()`暂停，`videoElement.currentTime`获取或设置当前播放时间。 5. **视频编码**: MP4(H.264编码)是最常见的视频格式，因为它在大部分现代浏览器中都有...
videojs插件播放视频
06-23
例如，`videojs-contrib-hls`插件支持HLS流媒体协议，使得在不支持HLS的浏览器中也能播放视频。 总的来说，videojs插件为Web开发者提供了一种强大而灵活的方式来集成视频播放，无论是在个人项目还是商业应用中，都...
HTML5 Video播放本地文件
皓亮君的博客
08-18 5万+
本人在做项目的时候，有个功能需求需要播放云上的视频和本地磁盘里的视频，播放云上的视频有url直接就能播放，但是播放本地的视频涉及到浏览器跨域的问题，在网上找了很多，但都不能解决我的问题，最后想到了构建流的方式在服务器上播放本地视频。 下面是我在服务器上播放本地视频的效果图 先贴上html5代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&......
在网站中使用VideoJs视频播放器播放视频
zgphacker2010的专栏
09-01 7925
之前使用videojs用来网页中播放视频，现在做一下总结 （这里把插件下载及演示地址、使用方法及demo放出来） 视频播放插件Video.js 插件下载地址：http://www.jq22.com/jquery-info404 演示播放视频地址：http://www.jq22.com/yanshi404（直接从浏览器打开观看效果） Video.js 是一个通用的在网页上嵌入视频播放器...
Unity视频播放之Video Player的简单使用
太阳暖不暖的博客
06-14 2万+
Unity3D常用视频格式：.mov、.mpg、.mpeg、.mp4、.avi、.asf如果都不识别，试试转换成ogv格式。转换完成之后，将视频素材文件拖入Unity Assets文件夹内。当前版本： 具体实现：1、右键Assets文件夹或任意文件夹→Create→Render Texture纹理渲染 设置视频的分辨率 2、Hierarchy面板右键创建UI→Raw Image然后把创建出来的Render Texture拖拽给Raw Image的Texture选项 结果如下图： 3、给Raw Image挂上
vue中使用video标签播放MP4，m3u8格式视频
08-26 1万+
一，播放MP4视频 <video src="/video/suanfa.mp4" controls width="100%" height="100%" poster="/video/img_cover.png" //视频初始封面地址。可选 ></video> 二，播放m3u8格式视频 比如播放m3u8格式的监控摄像头的视频 首先安装 cnpm i -S video.js cnpm i -S videojs-cont
video 属性和事件用法大全
CherishL_的专栏
09-26 978
video 属性 <!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" c...
Vue3视频播放（Video）
Mr Dear的博客
03-07 1万+
简易封装的视频播放组件，支持：自动播放；自动截取视频指定帧作为封面图；功能丰富，简单易用😁😁
html5 video全屏播放/自动播放
热门推荐
编程架构三分天下：分层、分治、分时序。
09-07 5万+
近期开始开发公司新版官网， 首页顶部（header）是一个全屏播放的小视频，开发过程中遇到一些麻烦，还好借助互联网解决了这个问题, 现简单总结如下： &amp;amp;amp;amp;lt;header class=&amp;amp;amp;quot;header&amp;amp;amp;quot; style=&amp;amp;amp;quot;width:100%;position: relative;&amp;amp;amp;quot;&amp;amp
vue H5使用video播放视频
leng0920的博客
08-11 910
vue H5使用video播放视频
vue使用video播放视频
08-30
在Vue中使用video播放视频可以按照以下步骤进行： 1. 首先，你需要安装vue-video-player插件。你可以通过运行"npm install vue-video-player -S"命令来安装该插件。 2. 在你的Vue组件中，你可以使用video标签来添加视频播放器。你可以设置isShow属性来动态展示或隐藏视频滚动条，并使用css样式来自定义视频播放器的外观。 3. 为了禁止视频下载，你可以在video标签中添加"οncοntextmenu=“return false”"属性。 4. 要监听视频播放进度，你可以使用video标签的"@timeupdate=“timeupdate”"方法。 5. 你还可以使用Vue的ref属性将video标签与监听事件绑定，以实现其他功能，例如时长统计、延迟提示、动态显示图标播放按钮等功能。 请注意，如果视频无法播放，你可以通过设置"notSupportedMessage"属性来自定义显示的默认信息。 请参考以下示例代码来使用video播放视频： ``` <template> <div> <video ref="videoPlayer" :isShow="showScrollbar" @timeupdate="timeupdate" controls> <source :src="videoUrl" type="video/mp4"> </video> </div> </template> <script> export default { data() { return { videoUrl: 'your-video-url.mp4', showScrollbar: true } }, methods: { timeupdate() { // 处理视频播放进度的逻辑 } } } </script> <style scoped> /* 自定义样式 */ </style> ``` 请根据你的需求和具体情况进行适当的修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue 使用 video 标签实现视频播放](https://blog.csdn.net/BradyCC/article/details/106434961)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [视频播放：vue使用vue-video-player插件](https://blog.csdn.net/provence_20/article/details/103461398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值