微信中video小窗播放(ios+android)

版权声明:本文为博主原创文章,需要转载尽管转载。 https://blog.csdn.net/z5976749/article/details/88583993

给video标签加上3个属性:

x5-playsinline="true" playsinline="true" webkit-playsinline

x5-playsinline="true" 是对微信中安卓有效,另一个对ios有效

微信中视频插件:video.js

在线地址:  这个插件配合上面的3个属性  苹果下不自动全屏 播放结束后自动隐藏

<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>

<link rel="stylesheet" href="https://cdn.staticfile.org/video.js/7.5.4/video-js.min.css">
 

声音插件:howler.js

  <script src="https://cdn.staticfile.org/howler/2.1.2/howler.min.js" charset="utf-8"></script>
 

视频代码:

  <video id="first" class="video-js vjs-default-skin" x5-playsinline playsinline webkit-playsinline preload="auto" poster="">
      <source src="image/合成.mp4" type="video/mp4" />
  </video>

    //视频初始化
    function videoInit() {
        var player = videojs('first', 
            {
                muted: false,
                controls: true,
                height: window.innerHeight,
                width: window.innerWidth,
                //loop: true,
            }
            ,function onPlayerReady() {
            videojs.log('播放器已经准备好了!');

            // In this context, `this` is the player that was created by Video.js.<br>  // 注意,这个地方的上下文, `this` 指向的是Video.js的实例对像player
            this.play();

            // How about an event listener?<br>  // 如何使用事件监听?
            this.on('ended', function () {
                videojs.log('播放结束了!');
                $('#firstDiv').hide();
                $('#nextDiv').show();
            });
        });
    }

 

展开阅读全文

没有更多推荐了,返回首页