player视频.js
var playStatus = 'pending';
var html_a = '<div class="weui-dialog__bd" id="lly_dialog_msg" style="font-size: 12px;"><br><b style="font-size: 16px;color: red"></b><br><br><span style="font-size:20px;">精彩内容,即将呈现</span><b style="color: red;"></b></div>';
var dianji_a = "<a href='javascript:ap_a();'>立即播放</a>"; $(function() { wxalert(html_a, dianji_a) <script>
var video = new tvp.VideoInfo(); //初始化视频对象
video.setVid(vid); //向视频对象传入视频vid ,这个是点播的时候使用
//video.setChannelId(cnlid); //向视频对象传入直播频道cnlid ,这个是直播的时候使用 /*点播跟直播的区别主要是:
点播是通过video.setVid(vid);
而直播是通过video.setChannelId(cnlid); 设置直播id
$("video").trigger("play"); //自动点击触发播放
点播需要player.addParam('type','2');或者省略,因为默认播放器为点播状态;
直播必须通过player.addParam('type','1');设置播放器为直播状态,。
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
*/ var player = new tvp.Player(width, height); //初始化播放器对象并设置宽、高
player.setCurVideo(video); //设置播放器初始化时加载的视频
player.addParam('type','1'); //设置播放器为直播状态,1表示直播,2表示点播,默认为2
player.addParam("wmode","transparent"); //设置透明化,不设置时,视频为最高级,总是处于页面的最上面,此时设置z-index无效
player.addParam('autoplay',false); //是否自动播放
player.addParam('pic',''); //播放器默认图,当autoplay=0时有效;不传入则使用视频截图
player.addParam('showend',0) //结束时是否有广告
player.addParam("flashskin", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf"); //flash播放器精简皮肤;不传入则使用默认皮肤
player.addParam("loadingswf", "http://imgcache.qq.com/minivideo_v1/vd/res/skins/web_small_loading.swf"); //加载视频时的swf动画; 不传入则使用默认样式
player.write(DOMid); //输出播放器
//events
player.onplaying = function(vid) {
console.log(vid);
}
player.onended = function(vid) {
console.log(vid);
} <video id="minione-video" class="minione-video" poster="./common/images/mini-one/miniONE_BG2.jpg" autoplay="autoplay" muted="muted" preload>
<source type="video/mp4" src="http://c1.mifile.cn/f/i/16/chain/airpro/airpro-top.mp4">
<!--<source type="video/mp4" src="./common/images/mini-one/mini-one-video.mp4">-->
<!--<source type="video/mp4" src="./common/images/mini-one/mini-one-video.Ogg">-->
<img src="./common/images/mini-one/BG2.jpg" alt="one"> </video> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Fake auto play html audio in iOS Safari the right way</title>
<style>
video{
width: 100%;
}
</style>
</head>
<body>
<video id="bgmusic" autoplay preload muted>
<source type="video/mp4" src="http://c1.mifile.cn/f/i/16/chain/airpro/airpro-top.mp4">
</video>
<script>
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
} var audioEl = document.getElementById('bgmusic'); // 可以自动播放时正确的事件顺序是
// loadstart
// loadedmetadata
// loadeddata
// canplay
// play
// playing
//
// 不能自动播放时触发的事件是
// iPhone5 iOS 7.0.6 loadstart
// iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
// audioEl.addEventListener('loadstart', function() {
// log('loadstart');
// }, false);
// audioEl.addEventListener('loadeddata', function() {
// log('loadeddata');
// }, false);
// audioEl.addEventListener('loadedmetadata', function() {
// log('loadedmetadata');
// }, false);
// audioEl.addEventListener('canplay', function() {
// log('canplay');
// }, false);
// audioEl.addEventListener('play', function() {
// log('play');
// // 当 audio 能够播放后, 移除这个事件
// window.removeEventListener('touchstart', forceSafariPlayAudio, false);
// }, false);
// audioEl.addEventListener('playing', function() {
// log('playing');
// }, false);
// audioEl.addEventListener('pause', function() {
// log('pause');
// }, false); // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener('ready', forceSafariPlayAudio, false);
// audioEl.src = 'http://c1.mifile.cn/f/i/16/chain/airpro/airpro-top.mp4';
})();
</script>
</body>
</html>
player视频.js的更多相关文章
- 直播视频插件--sewise player
直播视频插件 -- sewise player 2017-1-9 因为公司要开发一个关于购车直播的新项目,需要在页面引入直播视频,项目组之前都没有做过关于直播类型的项目,所以可以说是真的从各种资源中筛 ...
- H5全景视频VR视频
公司的有个专题页面涉及到全景视频展示这个技术点,找到一个相关的库. http://www.utovr.com/sdk/download 这里有个免费的SDK可以下载. 里面也有案例可以看,代码就照着 ...
- Yii2 框架下bootstrap 弹窗预览视频等~
Yii2 本身已经引用了'yii\bootstrap\BootstrapAsset',所以使用bootstrap 非常简洁. 1 在PHP页面引用命名空间 use app\assets\AppAsse ...
- 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- HTML5之创新的视频拼图剖析式学习之二
昨天我们剖析了一下翻阅体验的实现.今天要剖析另外一个很有意思的效果——视频拼图. 网站中第一部分第二页<月熊的标志>是月熊志中互动性较强的一页,页面上会随机分布9块视频碎片,用户可以通过鼠 ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- h5-音视频标签
###1. <video>:Html5提供的播放视频的标签 src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面 调用默认控件 ...
- 腾讯云点播视频存储(Web端视频上传)
官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...
随机推荐
- SVNKit学习——使用低级别的API(ISVNEditor接口)直接操作Repository的目录和文件(五)
本文是参考官方文档的实现,官方wiki:https://wiki.svnkit.com/Committing_To_A_Repository 本文核心使用的是ISVNEditor这个接口直接对Re ...
- 使用webBrowser下载文件
如果直接用webBrowser.Navigate("http://***.com/");会弹出文件下载的对话框. 而如果用webclient.UploadData()下载,对方网站 ...
- 二叉树的二叉链表存储结构及C++实现
前言:存储二叉树的关键是如何表示结点之间的逻辑关系,也就是双亲和孩子之间的关系.在具体应用中,可能要求从任一结点能直接访问到它的孩子. 一.二叉链表 二叉树一般多采用二叉链表(binary linke ...
- c++11简单的线程
线程的管理 启动线程 为了让编译器识别 std::thread 类,这个简单的例子也要包含 <thread> 头文件. 如同大多数C++标准库一样 线程在std::thread对象创建(为 ...
- apache log4j-1.2.15的使用
1.这个log4j的下载 下载 http://www.apache.org/dyn/closer.cgi/logging/log4j/1.2.15/apache-log4j-1.2.15.zip 2. ...
- 【[AHOI2005]病毒检测】
\(Trie\) 树+搜索 我用的是\(dfs\) 首先对于将所有的RNA片段都建到\(Trie\)树里去,之后来匹配那个模板串就好了 如果是匹配的位置是字母,那么我们就继续往下匹配 如果是\(?\) ...
- 二叉树前序、中序、后序非递归遍历 144. Binary Tree Preorder Traversal 、 94. Binary Tree Inorder Traversal 、145. Binary Tree Postorder Traversal 、173. Binary Search Tree Iterator
144. Binary Tree Preorder Traversal 前序的非递归遍历:用堆来实现 如果把这个代码改成先向堆存储左节点再存储右节点,就变成了每一行从右向左打印 如果用队列替代堆,并且 ...
- Windows平台JxCore打包
1.下载JxCore https://raw.githubusercontent.com/jxcore/jxcore-release/master/0311/jx_win64v8.zip 2.解压并配 ...
- CVPR 2016 paper reading (6)
1. Neuroaesthetics in fashion: modeling the perception of fashionability, Edgar Simo-Serra, Sanja Fi ...
- 如何设置ASP.NET页面的运行超时时间 (转载)
全局超时时间 服务器上如果有多个网站,希望统一设置一下超时时间,则需要设置 Machine.config 文件中的 ExecutionTimeout 属性值.Machine.config 文件位于 % ...