微信H5视频全屏播放demo

最新推荐文章于 2024-06-09 21:59:09 发布
最新推荐文章于 2024-06-09 21:59:09 发布
阅读量8k 收藏 2
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alpha_xiao/article/details/79345568
版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no">
<title>今天是个好日子</title>
<style>
*{  padding: 0;
    margin:0;
}
#frist{
position: absolute;
width: 100%;
height: 100%;
background-image: url(1.png);
background-size: 100% 100%;
background-position: top;
overflow: hidden;
}
#video_box{
position: absolute;
width: 100%;
height: 100%;
background-image: url(1.png);
background-size: 100% 100%;
background-position: top;
overflow: hidden;
display: none;
}
#video_all{
  position: absolute;
  width: 90%;
  top: 0;
  left: 5%;
  object-fit: fill;
  background-size: cover;
  overflow: hidden;
}
#btn,#againbtn{
width: 260px;height: 60px;
position: absolute;
top: 90%;
left:25%;
margin-top: -130px;
margin-left: -30px;
background-size: 100% 100%;
background-image: url(button.png);
background-size: 100% 100%;
}
#video_end{
position: absolute;
background-color: pink;
display: none;
background-size: 100% 100%;
background-image: url(last.jpg);
background-repeat: no-repeat;
background-position: top;
}


</style>
</head>
<body>
<!-- 最开始是暂停界面，手动控制视频的播放 -->
<div id="frist"></div> 
<!-- 视频播放区 -->
<div id="video_box">
   <video 
    id="video_all" 
    src="hello.mp4" 
    poster="1.png"
    autoplay="false" 
    webkit-playsinline="true" 
    playsinline="true" 
    x-webkit-airplay="allow" 
    x5-video-player-type="h5" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
    </video> 
<!--<video 
    id="video_all" 
    src="hello.mp4" 
    poster="1.png" /*视频封面*/
    autoplay="false" 
    webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/
    playsinline="true" /*IOS微信浏览器支持小窗内播放*/ 
    x-webkit-airplay="allow" 
    x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
    x5-video-player-fullscreen="true" /*全屏设置,设置为 true 是防止横屏*/
    x5-video-orientation="portraint"/*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
    style="object-fit:fill">
    </video> --> 
</div>
<!-- 视频播放按钮 -->
<div id="btn" οnclick="playcontr()"></div>
<!-- 视频播放结束 -->
<div id="video_end"></div>
<script>


var video_all = document.getElementById('video_all'),
      video_box = document.getElementById('video_box'),
      btn = document.getElementById('btn'),
      video_end =  document.getElementById('video_end');
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
video_all.pause();

document.addEventListener('touchmove', function(e){e.preventDefault()}, false);


function stylediv(divId){
    divId.style.width = clientWidth + 'px';
    divId.style.height = clientHeight + 'px'; 
}
function playcontr(){
    if (isAndroid) {
       video_all.style.width = '100%';
       video_all.style.left = '0';       
    }
    video_box.style.display = "block";
    video_all.play();
    btn.style.display = "none";
    video_end.style.display = "none";
};
// stylediv(video_box);
stylediv(video_end);
// 适配判断
var u = navigator.userAgent; 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 


// 暂停播放
video_all.addEventListener('pause',function(){  
    video_all.style.width = clientWidth + 'px';
    btn.style.display = "block";
})  


// 播放结束
video_all.addEventListener("ended",function(){
    video_all.pause();
    video_end.style.display = "block";
    video_box.style.display = "none"; 
});


</script>
</body>
</html>
alpha_xiao
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
h5 video视频播放
qq_41854017的博客
03-23 1万+
1.0最简单的&lt;video width="450" height="350" controls="controls" type="video/mp4" preload="auto"&gt;                         &lt;source src="../video/data/1.mp4" autostart="false&quo
Html中文乱码
tone1128的博客
10-09 2万+
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title></title> </head> <body> <video id="video" src="htt...
HTML中video标签铺满全屏！
最新发布
FENGZXCjjjjj的博客
06-09 391
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式。object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。关键是这个“object-fit: fill”，这样就可以解决了！fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
Html5视频播放小Demo
05-13
里面是使用Html5加CSS样式制作的视频播放小Demo，很简单的实现，加速，减速，全屏，静音，播放，暂停，轮播歌词等功能。
h5视频播放方案（优化版）
qq_27984747的博客
01-17 1133
，我使用了三种办法来解决ios、安卓在微信浏览器和其他浏览器播放视频的问题，虽然能够解决问题，但是这种办法太繁琐了，于是这次对上次的方案进行了优化，现在只需要使用一种办法就可以实现视频的播放。：把首页和视频放在同一个页面，一开始让视频隐藏，点击开始时显示并播放视频。：在之前的方案中，ios端的微信浏览器，是用canvas来绘制video，用ctx.drawImage(video,0,0,widht,height)去循环更新canvas画布，实现播放视频的，微信浏览器出现了黑屏的现象？
html5 播放视频DEMO
12-17
html5播放视频的源代码 ，可以播放标准的文件
video.js--很赞的H5视频播放库
jingge_nihao的博客
03-10 3406
video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页)，功能强大，且支持降级到flash,兼容ie8。官网：http://videojs.com/    git&amp;demo  ：http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip&lt;head&gt; &lt;title&...
H5视频播放器特性
weixin_33729196的博客
04-30 4215
微信浏览器全屏播放，官方称为（Ｈ5同层播放器） 通过video属性x5-video-player-type声明启用同层H5播放器 x5-video-player-type支持的值类型：h5 <video src="http://xxx.mp4" x5-video-player-type="h5"/> 复制代码注：这个属性需要在播放前设置好，播放之后设置无效，下面的x5-video...
微信H5支付DEMO 绝对可用
01-01
在这个“微信H5支付DEMO”中，包含了一整套完整的支付流程示例，帮助开发者快速理解和集成微信H5支付功能。下面我们将深入探讨相关知识点。 首先，我们来看核心文件`Wxpay.php`，这是微信支付SDK的核心类库，它包含...
java 微信H5支付Demo
03-29
java 微信H5支付Demo，已经成功使用在项目里，具体业务没有删除，请自动过滤业务层代码
微信小程序视频播放DEMO
04-19
10. **全屏功能**：微信小程序提供了全屏API，如wx.createFullScreenPlayer，可以实现视频全屏播放。 通过分析和实践这个DEMO，开发者不仅可以掌握微信小程序的基础知识，还能深入理解视频播放的实现细节，提升自己...
微信H5支付DEMO
07-20
微信H5支付DEMO是一个基于C#和ASP.NET技术实现的微信H5支付示例，主要目的是为了展示如何集成微信支付功能，使用户能够在H5网页中流畅地完成支付过程。这个DEMO涵盖了从调用微信支付接口进行统一下单到引导用户完成...
微信H5支付源码Demo
05-22
2 ,H5支付不能直接在微信浏览器中打开支付，需要打开外部浏览器才能支付。 3 ,微信公众号需要设置网页授权域名，添加支付目录，业务域名，js安全域。( 这项我不确定，公众号支付是要设置这些的) 4 ,需要在线上测试...
H5播放视频控件介绍
QDKCY_RainBoy的专栏
11-09 1万+
H5 video标签 浏览器中已经有默认的标签可以支持播放一些常用的格式；比如mp4。但是，HTML5 Video开放式标签根据浏览器的不同而播放不同格式。兼容性不算很好，支持一些基本的视频格式。 当然还有更好的选择，小G笑着说，就好像要给我展示一个秘密武器一般： jwplayer 播放器 相比video标签，jwplayer 播放器功能很强，支持的流媒体格式很多，也不需要按照插件。 结果当然是
HTML5 视频播放demo
xiaochuandujun的专栏
06-07 2370
HTML5 视频播放demo     今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。     HTML5 规定了一种通过 video 元素来包含视频的标准方法。     在HTML5中，video元素目前支持三种格式的视频文件， 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 2.MPEG4 = 带有
H5视频播放器开发-基础篇
万少博-FE
07-19 8605
点对点
H5 video 播放器demo
热门推荐
rth362147773的博客
06-11 2万+
H5 video 播放器demo前言最近在做一个wap端的项目，需要视频播放功能。大家也知道wap对flash支持很差，优先考虑使用h5播放器video,之后在介绍几个插件和第三方视频实现方法。H5 video因为是原生的界面比较普通，但使用起来没什么问题，手机端兼容情况很不错。网上的教程也比较多。我这里提供了一个demo给大家学习。demo代码：<!DOCTYPE html> <html>
H5研究一:定制一个最简单的H5 视频播放器<video></video>
Quinn's blog ! I'm glad to be here!
06-24 1万+
本文介绍使用video标签完成视频播放的播放器包含暂停、播放 循环播放 更改尺寸 > 效果如下： 编辑器：Hbuilder代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button onc
H5实现一个简易本地视频播放器
sinat_41660714的博客
11-29 5882
注：本例子没有涉及到数据库，是纯前端实现的 要点介绍 video标签是html5新增的一个标签，用于视频播放，在W3C官方文档可以查到它的相关方法，属性和时间，此处我大致介绍一下我用到的一些： 1，方法： play()，视频播放 pause()，视频暂停 load(), 视频加载 2，属性 currentTime,视频的播放进度 duration，视频的总长度 volume，视频的音量 3...
微信 h5 登录 demo
11-14
微信H5登录demo可以使用微信开放平台提供的JS-SDK来实现。首先，在开发者平台申请账号并创建应用，获取到AppID。 接下来，在H5页面中引入微信JS-SDK库文件，并在页面加载完成后初始化SDK。在初始化时，需要传入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值