video在微信和QQ浏览器中不全屏播放解决

news/2024/5/19 21:51:18/
最近公司做一个视频活动的HTML5页面,页面并不复杂,但是要求视频播放的时候不全屏。在网上看到好论坛类似的基本问题,以前有申请白名单的,在白名单的视频链接或者腾讯旗下的视频链接是原生播放,否则安卓会被劫持成腾讯家的播放器播放并且默认全屏,目前通过白名单的方法是解决不了的。还好终于找到了解决办法,下面好好整理一下。

在video标签中加属性

   <video id="videos" playsinline="true" poster="img/1.jpg" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"><source src="img/output.mp4" type="video/mp4" />
</video>

也就是所谓的开启同层播放器

x5-video-player-type="h5" /*让video开启同层H5播放器*/
x5-video-player-fullscreen="true" /*设置为 true 是防止横屏*/
playsinline="true" 和 webkit-playsinline="true" /*这个属性是ios中设置可以让视频在小窗内播放*/

上面的方法试了,在ios中可以不全屏,但是在安卓的微信中打开依然是全屏的。。。

视频解码

视频解码最好用FFmpeg转码,可以转mp4、mpeg、mkv....,还可以提取视频中的音乐。

mp4转MP4

ffmpeg -i D:\Projects\cat.mp4 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4

mkv转MP4

ffmpeg -i D:\Projects\cat.mkv -c:v copy -c:a copy cat.mp4

提取音乐

ffmpeg -i D:\Projects\cat.mp4 -f mp3 -vn apple.mp3

mp4转mpeg,视频的宽度必须是2的倍数

ffmpeg -i  D:\Projects\cat.mp4 -f mpeg1video -vf "crop=iw-mod(iw\,2):ih-mod(ih\,2)" -b 0 cat.mpg

其他使用方法可以到官网中查找,这里就不多介绍了。

1、Broadway

Broadway是从其他语言翻译而成,这个解码器支持 mp4 后缀的视频文件,有时候即使是手机拍摄的mp4格式的视频也没什么用,最好还是用ffmpeg再转一下格式。视频的地址最好是在线的地址,本地测试的时候本地视频在iphone上播放不了。

document.querySelector('body').addEventListener('click', function() {var player = new MP4Player(new Stream('img/cat.mp4'), false, '', 'auto');player.play();document.querySelector('#containerMP4').innerHTML = '';document.querySelector('#containerMP4').appendChild(player.canvas);
});

2、jsmpeg

jsmpeg是一个 MPEG1 解码器,个人觉得代码比较轻量。

var canvas = document.getElementById('canvas2'),off1 = true;
var audio = document.getElementById("bgMusic");
$('#canvas2').on("click",function(e){e.preventDefault();if(off1){off1 = false;document.querySelector('#loadWrap2').style.display = 'block';var player = new jsmpeg('img/cat.mpg', {canvas: canvas,onload : function(){document.querySelector('#loadWrap2').style.display = 'none';player.play();},onfinished : function(){off1 = true;}});}
})

以上两种方法都可以实现视频的不全屏播放,终于解决了一个大问题,但是对于专门做视频开发的不知道适不适用了。
另外还有一种方法,就是将图片转成一个个帧了,个人觉得有点麻烦,但是对于短视频来讲也可以采用。麻烦的就是用工具将视频转成图片了。

    var imgArr = [],source = {},now2 = 0,imgNum = 0,timer=null;var canvas2 = document.querySelector('#canvas2');var videoBox = document.querySelector('.videoBox');var view = {w : videoBox.offsetWidth,h : videoBox.offsetHeight};canvas2.width = view.w;canvas2.height = view.h;var ctx = canvas2.getContext("2d");ctx.clearRect(0,0,canvas2.width,canvas2.height);var audio = document.getElementById("bgMusic");//添加图片进数组function pushImgArr (num) {document.querySelector('#loadWrap2').style.display = 'block';//播放(继续播放)audio.play();imgArr = [];for( var i = 0;i < num;i++ ) {imgArr.push('videoImg/'+i+'.jpg');};imgLoad ();};//图片加载function imgLoad(){document.querySelector('#btn-play').style.display = 'none';source['src'+now2] = new Image();source['src'+now2].src = imgArr[now2];source['src'+now2].onload = function(){now2 ++ ;if( now2 > imgArr.length-1 ){//加载成功document.querySelector('#loadWrap2').style.display = 'none';//执行canvas渲染movieInit()}else{//递归加载imgLoad();};};}; //canvas图片渲染function movieInit (){clearInterval(timer);timer = setInterval(function(){if( imgNum == imgArr.length ){clearInterval(timer);//停止audio.pause();audio.currentTime = 0;}else{ctx.clearRect(0,0,canvas2.width,canvas2.height);ctx.drawImage(source['src'+imgNum],0,0,view.w,view.h);imgNum++;};},60);};//按钮点击开始播放document.querySelector('.playBtn2').onclick = function(){pushImgArr(30);};

http://www.ppmy.cn/news/470776.html

相关文章

手机浏览器全屏模式

申明&#xff1a;文章部分内容是我在各个网站上以及自己做项目时的总结&#xff0c;出处我已经不记得了。如果遇到版权问题请联系我&#xff0c;我会及时删掉。我是一个刚刚做前端1个多月的初学者&#xff0c;如果哪里有错误&#xff0c;还请各位大神们不吝赐教。欢迎吐槽与分享…

android手机浏览器研究报告,QQ浏览器Android客户端产品体验报告

概览 手机&#xff1a;魅族MX3 操作系统&#xff1a;Flyme OS 3.5.2(A19220) 体验产品&#xff1a;QQ浏览器Android客户端 软件版本&#xff1a;5.7.2.1400 需求分析 目标人群&#xff1a;所有移动互联网网民 使用场景&#xff1a;用户使用手机上网浏览网页、看小说、看视频、购…

Unity WEBGL设置浏览器全屏

转自unity 生成webGL自适应屏幕_姚智苒的博客-CSDN博客 在生成的html里面修改代码 <script type"text/javascript"> function Reset() { var canvas document.getElementById("#canvas"); canvas.height document.documentElement.clien…

js怎么让浏览器自动全屏显示

在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发&#xff0c;所以不能自动全屏&#xff1b;用户事件触发方法如下&#xff1a; // 判断各种浏览器&#xff0c;找到正确的方法 进入全屏 function launchFullscreen (element) {if (element.requestFullscreencreen) {el…

// js浏览器兼容问题

//1.兼容点击事件 function addEvent(dom,type,fn){//对于支持DOM2级事件处理程序addEventListener方法的浏览器if(dom.addEventListener){dom.addEventListener(dom,type,fn);}else if{//对于不支持addEventListener方法但支持attachEvent方法的浏览器dom.attachEvent(ontype,…

设置浏览器全屏展示网站

<!-- 全屏展示兼容代码 --> <!-- safair --> <meta name"viewport" content"widthdevice-width,initial-scale1.0, minimum-scale1.0, maximum-scale1.0, user-scalableno,minimal-ui"> <meta name "apple-mobile-web-app-ca…

html5QQ浏览器页面引导模板,CSS实现QQ浏览器功能

知识点 1.结合fullpage.js实现全屏滚动 2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 值 描述 direction 用角度值指定渐变的方向(或角度)。 color-stop1, color-stop2,… …

qq浏览器 for android,QQ浏览器 For Android 1.3版抢先发布!

Android手机市场的火爆也带动了Android手机浏览器的快速更新。2010年11月25日&#xff0c;腾讯发布了手机QQ浏览器(Android)1.2&#xff0c;仅1个月之后又更新发布了手机QQ浏览器(Android)1.3正式版&#xff0c;该版本在手机QQ浏览器(Android)1.2的基础上增加了节日闪屏、阅读模…

浏览器全屏

HTML5提供了启动和退出浏览器全屏模式&#xff0c;但是麻烦的是&#xff0c;必须要事件来触发。 某个元素全屏&#xff1a; <!DOCTYPE html><html> <head> <meta charset"UTF-8"> <title></title> </head> <body>…

视觉SLAM十四讲——ch12实践(建图)

视觉SLAM十四讲——ch12的实践操作及避坑 0.实践前小知识介绍1. 实践操作前的准备工作2. 实践过程2.1 单目稠密重建2.2 RGB-D稠密建图2.3 点云地图2.4 从点云重建网格2.5 八叉树地图 3. 遇到的问题及解决办法3.1 cmake ..时&#xff0c;出现opencv版本问题3.2 make -j8时&#…

移动端-浏览器设置全屏方法

移动端-浏览器设置全屏方法&#xff0c;解决移动端浏览器底部盖住页面 移动端浏览器&#xff0c;在做移动端页面的时候&#xff0c;移动端浏览器底部工具栏会遮盖住页面底部弹出框&#xff0c;很是头疼。最终在移动端设置全屏之后&#xff0c;达到想要的效果。以下是设置全屏的…

android 平板全屏,QQ浏览器安卓平板来啦!实现了真正的全屏,让阅读更加清静!...

QQ浏览器HD(aPad)v2.0版本全新发布&#xff0c;设计更加简约灵动&#xff0c;体验轻盈优雅。2.0版本启用了全新的UI设计&#xff0c;以沉静辽阔的淡蓝色为主题&#xff0c;标签栏和地址栏“轻”量设计&#xff0c;多窗口向右滑动呼出&#xff0c;多窗口“轻松”切换。同时实现了…

java 浏览器 qq_Qq浏览器通用版移动QQ浏览器v2.1Java通用版下载

下载地址: 移动QQ浏览器的Java版本运行平稳. 您可以通过长按页面上的空白来调用菜单,这更加方便. 新增了由腾讯移动客户端软件创建的夜间模式,对多项功能进行了优化和创新. 设置了QQ空间应用程序入口,您可以轻松体验许多精彩的应用程序,例如农场,牧场,微博,空间等. 主界…

浏览器打开就是全屏的代码说明

现在还没有发现通用的JS代码。 对于IE&#xff0c;可以通过下面的代码处理&#xff1a; 第一步&#xff1a; <script> window.οnlοadfunction(){ var wscript new ActiveXObject("WScript.Shell"); if (wscript!null) { …

PHP手机浏览器全屏,手机浏览器设置全屏

< !-- 仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent ) > < meta name"apple-mobile-web-app-status-bar-style" content"black" / > < !-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -…

qq浏览器点击全屏

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><button onclick"fullScreen()">现代浏览器全屏</button><button onclick"exitScreen()">…

计算机系统层次结构与操作系统和驱动的定义

一、程序分类 程序按其运行环境分为&#xff1a; 裸机程序&#xff1a;直接运行在对应硬件上的程序 应用程序&#xff1a;只能运行在对应操作系统上的程序 二、计算机系统的层次结构 计算机系统两种层次结构&#xff1a; 2.1 无操作系统的简单的两层结构 2.2 有操作系统的…

如何运行一个 SSM 项目以及解决 JDBC 连接数据库遇到的问题(已解决)

文章目录 &#x1f4cb;前言&#x1f3af;运行与配置&#x1f3af;报错与解决&#x1f9e9;问题分析&#x1f9e9;解决过程 &#x1f3af;知识点补充&#x1f9e9;关于 com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver 的区别 &#x1f4dd;最后 &#x1f4cb;前言 这篇文…

seaborn笔记:heatmap

绘制热力图 1 基本使用方法 seaborn.heatmap(data, *, vminNone, vmaxNone, cmapNone, centerNone, robustFalse, annotNone, fmt.2g, annot_kwsNone, linewidths0, linecolorwhite, cbarTrue, cbar_kwsNone, cbar_axNone, squareFalse, xticklabelsauto, yticklabelsauto, m…

分析总结:关于上海开饭店的成本和利润核算

2007年9月8日 星期六 11时34分 【人生事业】 分析总结&#xff1a;关于上海开饭店的成本和利润核算 做生意这么久&#xff0c;还不懂得小生意怎么做&#xff0c;试着帮你核算一下&#xff0c;想不到在国内做生意&#xff0c;并不比做老外生意差呢&#xff01;&#xff01;&a…