H5播放器内置播放视频（兼容绝大多数安卓和ios）

最新推荐文章于 2024-08-05 12:26:10 发布
最新推荐文章于 2024-08-05 12:26:10 发布
阅读量3.4w 收藏 7
点赞数 1
分类专栏： 终端播放直播 文章标签： H5播放器 内置播放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012454084/article/details/77333968
版权

关于H5播放器内置播放视频，这个问题一直困扰我很长一段时间，qq以前提供白名单已经关闭，后来提供了同层属性的控制，或多或少也有点差强人意。

后来一次偶然发现一个非常简单的方法可以实现。

只需要给video加上 webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" 即可（重点是x5-playsinline=""起的作用）

<video  id="example_video_1" class="video-js" webkit-playsinline=""
playsinline="" x5-playsinline="" x-webkit-airplay="allow"
width="100%" height="100%" src="" preload="true">
</video>


经实测有效，大家可以尝试一下！

韦三刀
关注
专栏目录
html调用本地视频播放,Android中webview html5 自动播放本地视频
weixin_42361153的博客
06-10 844
MainActivity代码public class Html5VideoAutoPlay extends Activity {WebView webview = null;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R....
Html5选择本地视频音频文件播放
weixin_30241919的博客
07-20 3850
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../Script/jquery-1.9.1.min.js" type="text/javascript">&lt...
纯JS 打造HTML5+APP 专属 VIDEO 视频播放器,支持记忆续播和缓冲进度条 ,支持 android/ios/web
u011861287的博客
03-07 4451
纯JS改写 video 支持Android / IOS /WEB三端播放。 支持播放视频格式： .mp4 .webm .m3u8 .mpd .flv 基础功能： 5+APP为什么要使用HTML5 视频播放器？，主要为了更方便在视频表层添加任何图标或物品也方便对播放器样式改造，进行相关操作，相对原生视频播放器，要在视频层添加图标就困难多了。 ...
video视频自动播放兼容IOS与Android
最新发布
wangweiscsdn的博客
08-05 663
视频播放兼容iOS与Android
html5播放本地文件播放器
05-15
关于html5播放本地文件播放器的一个示例
h5player:开源h5player
06-16
HTML5 播放器 兼容android 和 IOS 大部分浏览器，兼容PC端；
微信小程序嵌入H5页面播放监控webrtc视频流1~2秒画面延迟,安卓和ios都兼容
04-23
在微信小程序中嵌入H5页面来播放监控视频流，特别是使用WebRTC技术，可能会遇到1到2秒的画面延迟问题，而这个问题需要针对iOS和Android两大操作系统进行优化以实现良好的兼容性。以下将详细探讨这一主题，以及如何...
海康威视H5播放器开发指南，兼容各种主流浏览器
07-23
总之，海康威视H5播放器是一个强大且兼容性良好的网络视频播放解决方案，适用于多种场景，提供了一整套接口和事件机制，便于开发者实现定制化的需求。在实际应用中，需注意浏览器的兼容性和硬件性能对播放效果的影响...
H5播放器播放海康摄像头视频开发包和demo
01-20
本项目是关于“H5播放器播放海康摄像头视频开发包和demo”，这为开发者提供了一个方便的工具集，用于在网页端展示海康摄像头的实时视频流。 首先，我们来看“海康摄像头”。海康威视是一家知名的安防监控设备制造商...
H5海康WS在线视频播放器
10-16
海康威视（Hikvision）是一家知名的安防设备制造商，其产品包括监控摄像头等，而"海康WS在线视频播放器"则可能是他们为实现监控视频在线预览和播放所开发的一个专门的H5组件。 此播放器可能基于Web Socket（Ws）...
jw player drm视频播放器（h5、web、android、ios）视频播放
10-16
在Android平台上，JW Player通过集成上述的DRM解决方案，可以播放受保护的视频，无论是通过原生应用还是内置的WebView。对于iOS，JW Player同样支持FairPlay Streaming (FPS)，这是苹果专门为iOS和tvOS设备设计的DRM...
静态HTML5接入海康websocket视频流｜海康ws视频流接入H5页面
BUG设计师
03-18 1768
H5静态页面接入海康视频流
h5视频播放方案（优化版）
qq_27984747的博客
01-17 1360
，我使用了三种办法来解决ios、安卓在微信浏览器和其他浏览器播放视频的问题，虽然能够解决问题，但是这种办法太繁琐了，于是这次对上次的方案进行了优化，现在只需要使用一种办法就可以实现视频的播放。：把首页和视频放在同一个页面，一开始让视频隐藏，点击开始时显示并播放视频。：在之前的方案中，ios端的微信浏览器，是用canvas来绘制video，用ctx.drawImage(video,0,0,widht,height)去循环更新canvas画布，实现播放视频的，微信浏览器出现了黑屏的现象？
video的几个属性
来呀，快活呀
12-27 2488
x5-video-player-type： 为video标签添加属性：x5-video-player-type=”h5”，解决了视频层级过高的问题，但出现了点击播放自动进入全屏的问题。因此还需要监听x5的全屏事件进行适配，具体适配思路可以参见链接 为video标签添加属性：x5-video-player-type=”h5-page”，解决了视频层级过高的问题，视频播放也不会立刻进入全屏状态 x5-playsinline： 移动端播放视频时禁止全屏 ，设置x5-playsinline <video
HTML5 video 支持air play
weixin_30485291的博客
01-22 375
< video src="/path/to/video.mp4" x-webkit-airplay="allow" preload controls>< /video> 转载于:https://www.cnblogs.com/hikarusun/p/3529659.html
Vue 集成海康h5player，实现ws协议的实时监控播放
热门推荐
GIS（地理信息系统）
10-22 1万+
Vue 集成海康h5player，实现ws协议的实时监控播放
js调用android播放器,纯JS 打造HTML5+APP 专属 VIDEO 视频播放器,支持记忆续播和缓冲进度条 ,支持 android/ios/web...
weixin_39629075的博客
05-26 482
纯JS改写 video 支持Android / IOS /WEB三端播放。支持播放视频格式：.mp4.webm.m3u8.mpd.flv基础功能：5+APP为什么要使用HTML5 视频播放器？，主要为了更方便在视频表层添加任何图标或物品也方便对播放器样式改造，进行相关操作，相对原生视频播放器，要在视频层添加图标就困难多了。 扫一扫下载 安卓 DEMO ...
uni-app中使用video.js
cyj0919的博客
03-14 2507
【代码】uni-app中使用video.js。
视频在 H5 游戏中的应用
weixin_34256074的博客
04-11 368
前言 游戏中如果需要使用一些预先录制好的动画，动画格式可以选择 gif 文件和视频文件，视频文件和 gif 文件相比，size 更小（相同质量，gif 文件比 mp4 文件大５倍以上）。 如果视频能在 canvas 中或者 webgl 中播放，这样视频可以和其它游戏元素整合，实现以前需要很复杂的方式才能实现的功能，比如在一个旋转的 3D 立方体中播放视频...
写个vue原生兼容安卓和H5的短视频滑动播放器
05-01
好的，下面是一个简单的Vue原生兼容安卓和H5的短视频滑动播放器的实现： 1. 首先需要安装 `vue-touch` 插件，它可以让我们方便地处理触摸事件。可以使用以下命令安装： ``` npm install vue-touch ``` 2. 在Vue组件中引入 `vue-touch` 插件： ```javascript import VueTouch from 'vue-touch'; Vue.use(VueTouch); ``` 3. 定义一个 `SwipePlayer` 组件，该组件包含一个视频播放器和一个滑动条： ```html <template> <div class="swipe-player"> <video :src="source" ref="videoRef"></video> <div ref="sliderRef" class="slider"></div> </div> </template> ``` 4. 在组件的 `mounted` 方法中，初始化滑动条，并添加滑动事件处理程序： ```javascript mounted() { // 初始化滑动条 const slider = this.$refs.sliderRef; slider.style.width = '0%'; // 添加滑动事件处理程序 this.$swipeRight(this.handleSwipeRight); this.$swipeLeft(this.handleSwipeLeft); }, methods: { // 处理向右滑动事件 handleSwipeRight() { const video = this.$refs.videoRef; const slider = this.$refs.sliderRef; // 获取当前视频播放进度 const currentTime = video.currentTime; const duration = video.duration; // 计算新的播放进度 const newTime = Math.max(currentTime - 5, 0); const percent = (newTime / duration) * 100; // 更新视频播放进度和滑动条 video.currentTime = newTime; slider.style.width = `${percent}%`; }, // 处理向左滑动事件 handleSwipeLeft() { const video = this.$refs.videoRef; const slider = this.$refs.sliderRef; // 获取当前视频播放进度 const currentTime = video.currentTime; const duration = video.duration; // 计算新的播放进度 const newTime = Math.min(currentTime + 5, duration); const percent = (newTime / duration) * 100; // 更新视频播放进度和滑动条 video.currentTime = newTime; slider.style.width = `${percent}%`; } } ``` 5. 在 `data` 中定义视频的源地址： ```javascript data() { return { source: 'http://example.com/video.mp4' }; } ``` 6. 最后，样式可以根据需要进行自定义： ```css .swipe-player { position: relative; width: 100%; height: 300px; } .swipe-player video { width: 100%; height: 100%; object-fit: cover; } .swipe-player .slider { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #ddd; z-index: 1; } ``` 这样就完成了一个简单的Vue原生兼容安卓和H5的短视频滑动播放器。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值