Yii2 框架下bootstrap 弹窗预览视频等~
Yii2 本身已经引用了'yii\bootstrap\BootstrapAsset',所以使用bootstrap 非常简洁。
1 在PHP页面引用命名空间 use app\assets\AppAsset;
2 可以直接在PHP页面书写要弹出的iframe的div;在此出可以设置弹窗的宽高,位置,对话框标题等
<div class="modal fade" id="myModalpreview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
<div class="modal-dialog" style="width:800px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="myModalLabel">
视频预览
</h4>
</div>
<div class="modal-body">
<iframe class='iframeedit' style="width:750px;min-height:500px;border:none;" src=""></iframe>
</div>
</div>
</div>
</div>
3 给点击后弹窗按钮添加数据关联: 需要传输的数据名添加data-id来标志
<div class='itemvideopic' style='cursor:pointer;' data-id="<?=isset($videourlsthis[0])?$videourlsthis[0]:'null'?>" data-toggle='modal' data-target="#myModalpreview"></div>
4 重要的一步来了,书写JS将视频信息传递给iframe,方法为bootstrap自带的方法,
需要注意的事页面做了其他操作之后需要重新注册一下这个方法,可以封装起来,多次调用注册即可
$('#myModalpreview').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data('id');
var modal = $(this);
modal.find('.iframeedit').attr('src','/vod/modules/personalcourse/views/personalco/videopreview.php?id='+id);
});
5,视频预览的php页面代码
<?php
$videourls=$_REQUEST['id'];
?>
<div style='width:720px;height:450px;'>
<?php echo
"<script type='text/javascript' src='/vod/web/sewise.player.min.js'></script>"
?>
<?php echo
"<script type='text/javascript'>
SewisePlayer.setup({
server: 'vod',
type: 'flv',
videourl: '{$videourls}',
skin: 'vodWhite',
title: '',
lang: 'zh_CN',
starttime:0
});
</script>"
?>
</div>
6效果如下:
7 bootstrap 处理文本过长的代码:(原理为文本过长显示省略号,鼠标放在文本上时,上方弹窗显示所有文本)
<li style='cursor:pointer;' class='courseunpublishitem' data-toggle="tooltip" data-placement="top" title="<?= $courseitem?>">
<?= strlen($courseitem)>15?mb_substr($courseitem,0,5,'utf-8').'...':$courseitem ?>
</li>
Yii2 框架下bootstrap 弹窗预览视频等~的更多相关文章
- 终极指南:如何为iOS8应用制作预览视频
最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更大的iPhone 6,可穿戴设备Apple Watch,iOS8,以及旨在帮助用户更好的发现应用的App Store改版等等. 说到App St ...
- APP_Store - 怎样为iOS8应用制作预览视频
关于iOS 8应用预览视频的话题,从设计.技术规范,到录屏.编辑工具,介绍的都比较详尽:建议收藏,在接下来用的到的时候作以参考.下面进入译文. 最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更 ...
- deepin linux下markdown实时预览
# deepin linux下markdown实时预览 ## 参考文章------------------------------ [vim安装markdown插件](http://www.jians ...
- Yii2 框架下 session跨域共享互通
在项目实施过程中,往往把一个大项目进行分拆成几个独立的项目,项目用完全独立的域名和文件,可以放到不同的服务器上的独立分项目. 几个子项目共用一个登录点. 原理简单来说就是服务端session 共享, ...
- ffmpeg实现视频文件合并/截取预览视频/抽取音频/crop(裁剪)(ffmpeg4.2.2)
一,ffmpeg的安装 请参见: https://www.cnblogs.com/architectforest/p/12807683.html 说明:刘宏缔的架构森林是一个专注架构的博客,地址:ht ...
- IE8环境下的上传图片预览
今天做一个需要在IE浏览器上使用的信息录入项目,遇到了图片上传预览的问题,找了一些资料,最后使用了IE自带的滤镜做到了 <!--HTML IE8不支持opacity,只能使用双层,一层背景半透明 ...
- 关于asp.net mvc中 weiui gallery中IOS 下不显示预览图片问题的解决方式
IOS 下面不显示预览. 结果去掉了红框中的缓存部分 就可以显示了 备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content=&qu ...
- CPF C#跨平台UI框架发布安卓端预览版
CPF的安卓端适配采用Xamarin的安卓绑定库,而不是Xamarin.Form.CPF和flutter差不多,完全由skia绘制,基本不依赖原生控件. 当前还只是预览版,不建议用在正式项目中. 可能 ...
- YII2框架下使用PHPExcel导出柱状图
导出结果: 首先,到官网下载PHPExcel插件包,下载后文件夹如下: 将Classes文件夹放入到项目公共方法内. 新建控制器(访问导出的方法):EntryandexitController < ...
随机推荐
- 《招聘一个靠谱的iOS》面试题参考答案(上)
说明:面试题来源是微博@我就叫Sunny怎么了的这篇博文:<招聘一个靠谱的 iOS>,其中共55题,除第一题为纠错题外,其他54道均为简答题. 博文中给出了高质量的面试题,但是未给出答案, ...
- Zookeeper学习记录(一):设计与实现
概述 Zookeeper是一个分布式的.开源的分布式应用协调服务.它暴露了一组简单的基础原件,分布式应用可以在这些原件之上实现更高级别的服务,如同步.配置维护.群组.和命名.它被设计成容易编程实现的, ...
- [R语言画图]气泡图symbols
绘制气泡图主要使用函数symbols(x,y,circle=r).当中x.y是坐标轴,r是每一个点的半径. x<-rnorm(10) y<-rnorm(10) r<-abs(rnor ...
- hdu1171 Big Event in HDU 01-背包
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1171 Problem ...
- maven ClassNotFoundException: org.springframework.web.context.ContextLoader
信息: Starting Servlet Engine: Apache Tomcat/6.0.32 2012-3-31 9:39:40 org.apache.catalina.core.Standar ...
- Chrome 开发者工具详解(2):Network 面板
面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Security面板.Audit ...
- asp.net UpdatePanel 不能局部刷新问题汇总
1.web.config 配置问题. 关于web.config的配置方面网上有很多资料参考,按照其方法做即可实现. 2.网站 Framework 版本变化造成不能局部刷新问题 版本更新时,会 ...
- FLASH图片上传功能—从百度编辑器UEditor里面提取出来
为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样 ...
- ios 网络数据下载和JSON解析
ios 网络数据下载和JSON解析 简介 在本文中笔者将要给大家介绍ios中如何利用NSURLConnection从网络上下载数据,如何解析下载下来的JSON数据格式,以及如何显示数据和图片的异步下载 ...
- eclipse中默认的提示键
Alt+/:代码提示 Ctrl+/:注释/取消注释 Ctrl+D:删除光标所在行 Ctrl+K:将光标停留在变量上,按Ctrl+K键可以查找到下一个同样的变量 Shift+Ctrl+K:和Ctrl+K ...