• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

javascript - 使用 video.js 在 ios 上播放视频内联?

[复制链接]
菜鸟教程小白 发表于 2022-12-12 09:57:21 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我正在尝试使用 video.js 在所有平台上保持一致的视频皮肤。下面的代码适用于所有东西(chrome、firefox、ie、android),但 ios 上的 safari(尚未测试 safari 的桌面版本)。当尝试播放视频时,ios 会转到它的默认视频播放器(快速时间?)。这是一个问题,因为我希望从皮肤中删除视频控件,以便用户必须观看视频。有没有办法使用 video.js 或其他网络插件来在所有平台上拥有一致的视频播放器 UI,或者这对于 ios 来说是不可能的?

<html>

<head>
    <!--#include virtual="/assets/inc/headcontent.htm" -->


  <link href="http://vjs.zencdn.net/5.3.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>


</head>
<body>

    <div class="row">

        <div class="col-xs-12 col-md-10 col-lg-8">

            <div class="">
                <video id="the_video" class="video-js" controls preload="auto">
                    <source src="videos/english.mp4" type='video/mp4'>
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a web browser that
                        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                </video>
            </div>

        </div>

    </div>


    <!--#include virtual="/assets/inc/footcontent.htm" --> 


  <script src="http://vjs.zencdn.net/5.3.0/video.js"></script>


  <script>

    var player = videojs("the_video", {}, function(){
      // Player (this) is initialized and ready.
    }).ready(function(){

        console.log(this.options()); //log all of the default videojs options

       // Store the video object
      var myPlayer = this, id = myPlayer.id();
      // Make up an aspect ratio
      var aspectRatio = 264/640; 

      function resizeVideoJS(){
        var width = document.getElementById(id).parentElement.offsetWidth;
        myPlayer.width(width).height( width * aspectRatio );

      }

      // Initialize resizeVideoJS()
      resizeVideoJS();
      // Then on resize call resizeVideoJS()
      window.onresize = resizeVideoJS; 
    });


  </script>

</body>
</html>



Best Answer-推荐答案


从 iOS 9 及更高版本开始,您现在可以将 playsinline 属性添加到 video 标签以使其内联播放。 https://webkit.org/blog/6784/new-video-policies-for-ios/我刚刚测试过,它适用于 video.js

<video class="video-js" poster="#" playsinline autoplay loop>
  <source src="#" type="video/mp4">
</video>

关于javascript - 使用 video.js 在 ios 上播放视频内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34165653/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap