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的更多相关文章

  1. 直播视频插件--sewise player

    直播视频插件 -- sewise player 2017-1-9 因为公司要开发一个关于购车直播的新项目,需要在页面引入直播视频,项目组之前都没有做过关于直播类型的项目,所以可以说是真的从各种资源中筛 ...

  2. H5全景视频VR视频

    公司的有个专题页面涉及到全景视频展示这个技术点,找到一个相关的库. http://www.utovr.com/sdk/download  这里有个免费的SDK可以下载. 里面也有案例可以看,代码就照着 ...

  3. Yii2 框架下bootstrap 弹窗预览视频等~

    Yii2 本身已经引用了'yii\bootstrap\BootstrapAsset',所以使用bootstrap 非常简洁. 1 在PHP页面引用命名空间 use app\assets\AppAsse ...

  4. 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  5. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  6. HTML5之创新的视频拼图剖析式学习之二

    昨天我们剖析了一下翻阅体验的实现.今天要剖析另外一个很有意思的效果——视频拼图. 网站中第一部分第二页<月熊的标志>是月熊志中互动性较强的一页,页面上会随机分布9块视频碎片,用户可以通过鼠 ...

  7. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  8. h5-音视频标签

    ###1. <video>:Html5提供的播放视频的标签          src:资源地址          controls:该属性定义是显示还是隐藏用户控制界面 调用默认控件    ...

  9. 腾讯云点播视频存储(Web端视频上传)

    官方文档 前言 所谓视频上传,是指开发者或其用户将视频文件上传到点播的视频存储中,以便进行视频处理.分发等. 一.简介 腾讯云点播支持如下几种视频上传方式: 控制台上传:在点播控制台上进行操作,将本地 ...

随机推荐

  1. 初级游戏外挂编程详解 windows运行原理+游戏辅助编程 游戏外挂编程

    详解游戏辅助编程 [目录] 1-什么是Windows API 2-Windows进程 3-Windows 的内存的运行原理 4-windows 中句柄的概念 5-Windows的变量类型 6-辅助实现 ...

  2. C/C++内存泄露检测

    以下测试基于的gcc版本: gcc (Ubuntu 4.8.4-2ubuntu1~14.04) 4.8.4Copyright (C) 2013 Free Software Foundation, In ...

  3. with优化妙用

    --语法: /*with   alias_name1 as    (subquery1),  alias_name2 as    (subQuery2),  ……  alias_nameN as   ...

  4. 六种排序算法的JavaScript实现以及总结

    最近几天在系统的复习排序算法,之前都没有系统性的学习过,也没有留下过什么笔记,所以很快就忘了,这次好好地学习一下. 首先说明为了减少限制,以下代码通通运行于Node V8引擎而非浏览器,源码在我的Gi ...

  5. 洛谷 P3175 [HAOI2015]按位或

    题目分析 与hdu4336 Card Collector相似,使用min-max容斥. 设\(\max(S)\)表示集合\(S\)中最后一位出现的期望时间. 设\(\min(S)\)表示集合\(S\) ...

  6. swift的动态库

    共享可执行文件 iOS 有沙箱机制,不能跨App间共享共态库,但Apple开放了App Extension,可以在App和Extension间共间动态库(这也许是Apple开放动态链接库的唯一原因了) ...

  7. 如何设置活动监视器中的可见作业数能显示更长范围之内的作业（如何让bpdbjobs/Active Monitor显示更多作业信息）

    一.问题:     如何设置可以使得活动监视器中的可见作业数能显示更长范围之内的作业(即NBU软件不要自动删除活动监视器中短时间内(如8天)内的作业记录)? 二.解决方法:      默认情况下在Ac ...

  8. 轻松排查线上Node内存泄漏问题

    I. 三种比较典型的内存泄漏 一. 闭包引用导致的泄漏 这段代码已经在很多讲解内存泄漏的地方引用了,非常经典,所以拿出来作为第一个例子,以下是泄漏代码: 'use strict'; const exp ...

  9. ASP.NET Web API编程——客户端调用

    可以使用HttpClient这个调用Web API,下面是HttpClient的定义,列举了一些常用的方法,其中还有一些没有列举,包括重载的方法. public class HttpClient : ...

  10. Mac－－查看公钥

    打开macbook的终端输入以下命令: $ cd ~/.ssh $ ls $ cat id_rsa.pub