关闭

H5视频交互

时间: 2019-09-11阅读: 1355标签: 视频

注意

在uc浏览器和ios微博里面,是不支持视频交互的,暂时没有办法把层级放在视频上方,IOS 必须用click事件点击之后视频才会播放,不支持自动播放 安卓环境下,视频播放会全屏播放,播放完之后不会回到原页面,可以做个display: none 让视频退出全屏


微信解决视频层级播放问题

腾讯接入文档链接:https://x5.tencent.com/tbs/guide/video.html

<video
         class="js-video"
         id="idVideo"
         webkit-playsinline="true"
         playsinline="true"
         x5-playsinline="true"
         x-webkit-airplay="true"
         x5-video-player-type="h5"
         x5-video-player-fullscreen="true"
         x5-video-orientation="portrait"    
         preload="auto" >
</video>


视频的几个事件

     // 视频加载完毕
    local.addEventListener('canplaythrough', function() {
       //要执行的函数内容
       console.log('资源加载完成了');
     });
     // 进入全屏
    local.addEventListener('x5videoenterfullscreen', function() {
       console.log('进入全屏了');
     });
     // 退出全屏
    local.addEventListener('x5videoexitfullscreen', function() {
       console.log('退出全屏了');
    });
		 // 播放完了
		local.addEventListener('ended', function() {
			   console.log('播放完了');
		})
		// 监听播放进度
	local.ontimeupdate = function(e) {
         console.log('播放进度')
  };


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5846

关闭

Video Renderer:高性能移动 Web 端视频编辑器

Video Renderer 是一款针对移动 Web 应用开发的高性能视频编辑器。在 2019 伦敦全栈工程师大会( Fullstack London 2019 conference )上, Threads Styling 公司的软件开发工程师Forbes Lindesay 分享了 Video Renderer 的开发经验。

web视频播放

毫无疑问,现在是短视频、直播的时代。视频内容逐渐代替图文形式成为网友们获取新鲜事物以及展现自我的一大媒介。随着5G的到来,2020年属于直播短视频爆发式增长的一年,电商平台也都涌入直播营销的大风口

jsmpeg.js_h5移动端视频自动播放

在移动端使用h5自动的video标签播放视频,设置autoplay属性,在android端部分不支持,全屏播放还存在层级问题,ios10以上版本支持视频自动播放,以下版本不支视频自动播放

vue实现自定义H5视频播放器

前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑,这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭

价值2580元廖雪峰前端视频,终终终于免费啦!

vue是国内最常用的前端框架,作者是尤雨溪大佬中文资料多,而且上手快,生态繁荣,是新手入门的首选框架。即将更新到3.0版本,追赶技术浪潮 进大厂就靠它啦

如何将视频设置为网页背景【转】

有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放

基于 WebRTC 的 RTSP 视频实时预览

由于项目需要,需要使用摄像头预览功能,设备型号为海康威视。目前已存在的基于 FFmpeg 的方案延迟都太高,所以项目最终选择基于此方案。方案选用为基于 WebRTC 的视频即时通讯,它原生支持对 RTP 协议的解码

js实现截取视频帧图片作为封面预览图

前端需要把视频文件的第一帧图像截取出来,并做为缩略图显示在页面上,这里需要利用HTML5中强大的画布canvas来实现该功能

video.js切换视频源问题

什么要再重新load一下什么替换一下src,没有啥作用,简单粗暴又有效的方法,video的问题,单单替换source的src是不行的,简单明了重新替换整个video标签,将video用js重新替换一遍,更改src

视频全屏弹幕实现

这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!