关于直接在网页中插入mp4视频实际应用中经历的那些事儿

一:实现点击图片任意位置可播放视频。

大家都知道,如果直接用Video标签插入视频的话,直接点击画面是不能实现播放功能的。只能用controls属性为视频加上控制栏,点击控制栏中的播放按钮才可以播放。但是设计师又偏偏喜欢在视频的位置放一个带播放按钮的图片。如下图:

 怎么实现点击那个图片就可以播放视频呢?这里要用到一个插件。下载地址

接下来在页面中用下面代码来插入视频。

经过测试,通过这个插件插入的视频要比直接用video标签插入加载的更快。

<link rel="stylesheet" href="jsmodern.min.css">
<script src="jsmodern.min.js"></script>
	<script>
		$(function () {
			jsModern.video("#video");
			//播放视频
			$(".VideoBtn").click(function() {
				var video = document.getElementById("videoShow");
				video.play();
				$('.VideoBtn').hide();
			})
			//监听视频的播放状态
			var video = document.getElementById("videoShow");
			video.oncanplay = function() {
				$(".VideoBtn").show();
				//$("#video").attr("poster","");
			}
			//视频播放事件
			video.onplay = function() {
				$("#videoShow").attr("poster", "");
				$(".VideoBtn").hide();
			};
			video.onplaying = function() {
				$(".VideoBtn").hide();
			};
			//视频暂停事件
			video.onpause = function() {
				$(".VideoBtn").show();
			};
			//点击视频周围暂停播放图片出现
			video.onclick = function() {
				if (video.paused) {
					$(".VideoBtn").hide();
					video.play();
				} else {
					$(".VideoBtn").show();
					video.pause();
				}
			};

		})
	</script>
<!--HTML部分-->
<div id="video" style="width:100%;height:507px;cursor:pointer;">
    <video src="/web/pic/vv.mp4" id="videoShow" poster="/web/pic/vpic.jpg"></video>
	<span ><img src="/web/pic/vpic.jpg"></span>
</div>

这个时候就可以正常播放了。

二:网页插入视频只有声音没有图像?

解决方法:用格式工厂,把视频转成H264编码即可

具体见下图:

这个问题我已经遇到很多次了。都是这样解决的。 

 三:关于网页中插入视频全屏播放的时候的层级导致的遮挡问题

大家会发现,有时候全屏播放的时候,视频会自动置于最顶层,有时候会自动置于最底层。导致页面元素互相遮挡让人很郁闷。

这里老蔡用了一个非常土鳖的办法,但是可以解决大部分问题。

这个办法的主要核心就是通过JS判断视频是否是全屏状态

 

//判断是否全屏函数
function checkFull(){
    var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
    if(isFull === undefined) isFull = false;
    return isFull;
}
//这里为什么用window.resize我一直理解不了。不应该是视频resize吗?
$(window).resize(function () {
    if (checkFull()) {
        //console.log("全屏了");
	    //这里该隐藏的隐藏,该显示的显示,该加z-index的根据自己的需要处理即可
    }
    if (!checkFull()) {
        //console.log("退出全屏");
        window.location.reload();
        //这里我很懒,退出全屏后直接页面重载,之前处理过的元素就全部初始化了。
    }
});

 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值