H5分享页面背景音乐及播放视频

背景音乐部分跟视频播放部分出了点小问题，后来解决了，记录一下。

背景音乐基本需求：在背景右上角定位一个音乐开关，打开H5时自动播放，播放时开关一直旋转，点击关闭音乐，开关不旋转，还有如果播放视频时，音乐自动停止。

视频基本需求：视频宽度需考虑适配，占屏幕宽度的80%，宽高比16：10。

首先写背景音乐开关。

<!--背景音乐--><divid="audio_btn"class="rotate"><audiosrc="hello_music.mp3"autoplay="true"loop="loop"id="media"preload="true"></audio></div>

css如下，部分屏幕用媒体查询单独调了

/*音乐图标*/#audio_btn{position: absolute;right: 10px;top: 10px;z-index: 200;width: 30px;height: 30px;background-image: url('/img/bgmBtn.svg');background-size: contain;background-repeat: no-repeat;}
.rotate{-webkit-animation: rotating1.2s linear infinite;-moz-animation: rotating1.2s linear infinite;-o-animation: rotating1.2s linear infinite;animation: rotating1.2s linear infinite;}

JS如下，用原生的查找元素，不然play()和pause()给不上去。加一个事件监听，视频播放的时候音乐自动停止。

//音乐开关var x = document.getElementById("media");var y = document.getElementById("video");$("#audio_btn").click(function(){$(this).toggleClass("rotate");//控制音乐图标 自转或暂停if($(this).hasClass("rotate")){x.play();$(this).addClass("rotate");}else{x.pause();$(this).removeClass("rotate");}
});y.addEventListener('play',function(){x.pause();$("#audio_btn").removeClass("rotate");});

这里还遇到一个问题，ios系统进入会截流，不会自动播放音乐，在wx.ready里面加了几句，如下：

wx.ready(function(){document.getElementById("media").setAttribute('src','hello_music.mp3');document.getElementById("media").play();。。。。。。。。。。});

到这，背景音乐就OK了。下面写视频。

原先视频是腾讯视频上面的，可以自动生成iframe，把那段贴进来就可以直接用。代码如下:

<iframeframeborder="0"id="video"src="https://v.qq.com/iframe/player.html?vid=y0673ox0uk8&tiny=0&auto=0"allowfullscreen></iframe>

但是后来提需求，需要有个我们自己的封面，我就在想用video的poster属性，下视频也遇到了一个小问题。

腾讯视频是他自己的qlv格式，网上搜了一下，利用缓存可以合成一个mp4格式的。步骤如下：

先用腾讯视频下载这个视频，然后在下载设置中找到缓存地址：

打开vodcache文件夹，把这堆文件都复制一下

我在E盘随便建了个文件夹

然后按住shift+鼠标右键，打开命令窗口，或者从windows键+R 输入cmd 进查找一下当前文件夹也可以。

输入命令 copy/B e*.tdl video.mp4 注意，*前面的是开头字母，如果文件都是a开头就是 a*

然后文件夹里就多了一个mp4文件，试了一下，OK 的。

然后用video标签插入，代码如下

<videoid="video"src="video.mp4"controls playsinline poster="video-cover.png"></video>

视频的width是屏幕的80%，宽高比一定，高度用JS写，添加一个监听事件，横竖屏转换的时候视频宽高也要变一下。

//视频高度定义var onresize= function(e) {var $video = $("#video");$video.height("height",$("#video").width()*10/16);};window.addEventListener('resize',onresize);onresize();

到这里就OK了。

H5分享页面背景音乐及播放视频相关推荐

H5分享页面（1）——web端二次分享配置内容
在H5分享页面中,如果用户进行了二次分享,需要进行一些配置才能进行使用,如微信二次分享就必须调用微信的JS-SDK来完成.下面对分享配置代码进行了封装: 存放路径:public/resources/j ...
微信H5页面背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐.基于微信的H5页面的音频自动播放的方法网上有很多教程,本次分享的只是一种思路! <audio id=&q ...
java与js交互视频_Android与H5交互—Java调用Js、Js调Java、H5页面调用Android播放视频...
content="ANZO,GAME,LOL,DNF,DOTA,撸啊撸,地下城与勇士,掌游宝,攻略,宝典,模拟器,加点,战报,英雄,最新,最全,最强,视频"> content ...
H5 在ios上自动播放视频
前言最近的H5项目中有个开场动画使用了序列帧,但是因为原视频长达15秒,导出的序列帧很大,在loading阶段,用户等待时间过长,所以有这样的方案,在IOS中使用视频来代替序列帧,在安卓中由于不能自 ...
ios系统微信H5页面背景音乐自动播放
思路:在页面中内嵌微信开发的代码块,可让ios手机自动播放背景音乐注意:代码引入了微信js接口,实际开发需配置jsjdk html代码 <!DOCTYPE html> <html ...
uni-app中，小程序或h5页面背景音乐的播放与暂停
在uni-app中写小程序或h5页面时,用到背景音乐,以及图标的旋转动画一.创建music.js 放在static或新建文件夹 const bgm = uni.createInnerAudioCon ...
Android 反编译快手APP,GitHub - wakasann/gksvideourla: Android 客户端解析快手分享链接获取到播放视频链接...
解析快手短视频分享的链接,获取到播放的MP4链接,最后在浏览器中打开MP4链接进行下载 App页面截图: Todo List 了解Rxjava2+Retrofit2+MVP的网络请求封装添加一个配置 ...
android 启动视频,android 启动页面全屏播放视频
有时候大家在启动软件的时候,会看到有一个比较炫酷的短视频,觉得很有意思,现在做项目的时候也遇到了,跟大家分享一下. 首先,在 res 目录下建一个文件夹 raw, 把你的视频文件(.mp4等)放进去. ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...

H5分享页面背景音乐及播放视频

H5分享页面背景音乐及播放视频相关推荐

最新文章

热门文章