视频点击弹窗（模拟框）播放

最新推荐文章于 2024-07-22 14:57:33 发布

Andy____Li

最新推荐文章于 2024-07-22 14:57:33 发布

阅读量1.8w

点赞数 2

分类专栏：前端文章标签：模态框 jquery videoview视频播放

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/m0_37263637/article/details/79015980

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近又要实现一个需求，每个日期下面都对应很多的视频文件，而我们需要点击其中一个让它直接弹窗播放。

因为前端基本上没有什么基础，本文只是强行实现了想要实现的功能，所以各位如果发现某些实现比较愚蠢，请不吝赐教。

实现基础：
1. bootstrap
2. video标签
3. JQuery

待处理的界面是这样的。
这里写图片描述

1 替换原video标签事件

目标是不管点击缩率图还是播放按钮都应该是弹窗，本身视频不播放。
Html:

<div class="col-sm-9" id="filelist">
    <video controls="" width="320" height="240" class="video_link" poster="xxx.jpg">
        <source src="xxx.mov?" type="video/mp4">
    </video>
    …………
</div>

1.1 为动态生成的video标签绑定事件

$("#filelist").on('click', ".video_link",function(){
    var videoDom = event.target;
    videoDom.play();
});

先绑定一个点击事件，我们通过 event.target获取到触发事件的videoDOM，用执行播放作为测试。（实现点击video标签就触发事件）

1.2 video标签播放按钮也要能触发事件

$("#filelist").on('mouseenter', ".video_link", function(){
    var videoDom = event.target;
    videoDom.addEventListener('play', function(){
        videoDom.play();
    }；
}

没有找到点击video标签播放按钮触发事件的绑定方法。即我们使用JQuery对象并不能使用videoDOM对象方法。
所以就拆成了两步，
第一步：是如果要点击播放按钮，鼠标肯定会移动到video标签内，即触发了JQuery提供的鼠标移动事件。我们通过 event.target获取到触发事件的videoDOM。
第二步：使用video 标签本身提供的方法 addEventListener（’play’,function{}）;对play事件进行监听。

PS:firefox不支持event解决方案。为了兼容firefox 我们通过下列方式获取event

$("#filelist").on('click', ".video_link",function(e){
    var eventAll =  window.event || e;
    videoDom = eventAll.target;
}

video标签可参考：
https://www.jianshu.com/p/404d01b8e713

2 boostrape模态框

经常查阅资料，我们可以选择boostrape模态框实现弹窗功能。

<div class="modal fade" id="myModal"  role="dialog" aria-labelledby="videoPlayModal">

Class：Bootstrap CSS 的四个 class modal、hide、fade 和 in。modal 用来把

的内容识别为模态框，hide固定影藏。fade 表示淡入淡出的效果。
role：dialog 实际测试没有不能触发模态框。
aria-describedby：对模态框的描述
aria-hidden：true表示元素隐藏(不可见)，false表示元素可见。

整个modal框架需要div.modal-dialog和div.modal-content两个元素包裹，如果没有样式会非常奇怪。是这样的：
这里写图片描述
用这两个div包裹后是这样的

<div class="modal-dialog" style="width:960px;">
    <div class="modal-content">

这里写图片描述

2.2 解决video标签和modal模态框契合问题

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="videoPlayModal" aria-hidden="true">'
    <div class="modal-dialog" style="width:960px;">
        <div class="modal-content">
            <div class="modal-body">
                <video></video>
            </div>
        </div>'
    </div>
</div>

直接将video填入到modal-body 结果是这样的：
这里写图片描述
我们为video添加style=”width= 100%;height=100%;object-fit:fill” 可以贴合div。但实际把video放在modal-body下会出现一定的错位。
我们将video放在modal-dialog同级发现可以完美切合框架。同时也需要把modal-dialog宽度设置和视频大小一致。

2.3 为modals添加退出链接。

<a class="close" data-dismiss="modal" style="position:absolute; top:5px; right:5px;">×</a>

当我尝试把这个退出链接按照教程放在<div class="modal-head"> div中时我发现header和video标签也有很严重的错位。
最后链接放到'<div class="modal-body">' 并用 style=”position:absolute; top:5px; right:5px;”语句把它放置在了右上角。
效果图：

boostrap模态框可参考菜鸟教程：
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html

3 在事件中触发模拟框并替换视频地址

var videoUrl = ($(videoDom).find("source")).attr('src');
var jpgUrl = $(videoDom).attr('poster');
$("#myModal #playdom").attr("src", videoUrl);
$("#myModal #playdom").attr("poster", jpgUrl);
$("#myModal").modal('show')();

通过JQuery得到触发事件视频的src（视频地址）及poster（指定图片地址）。
用选择器选到模拟框下面的video标签。
调用模拟框提供的方法（show）弹出模拟框。

PS:这部分有一个很坑的地方:

<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
</video>

一般情况下的video标签是这样写的，但是我们要动态修改video标签，修改的src 并不是在source元素下，而是video元素下的src。

<video width="320" height="240" controls  src="">
  <source src="movie.mp4"  type="video/mp4">
</video>

video 的src 这个属性用于指定视频的地址。
Source标签用于给媒体指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。浏览器按source标签的顺序检测标签指定的视频是否能够播放，如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。此标签包含src、type、media三个属性。

实际测试修改source标签下的src是不能播放的