Video.js无法播放本地视频？

Posted 2023-04-07

上面那个是下载的demo，下面那个是我复制下来修改的，代码如下：

资源如下：

文件能正常播放
source改为：file:///video/c2.mp4也不行，改为file://D:/Kevin/Test/html/VideoJS/video/c2.mp4也不行。
PS：poster="video/poster.jpg"这个能获取。
求大神

参考技术A 所有的浏览器默认是不允许js访问本地文件的，就算使用控件，也必须得到用户的允许，明白没？追问

我要把这个东西放到android的webview上面 我看到有一个方法是：setAllowFileAccess（boolean allow）；这个是你说的允许吗？但是 还是不行。

追答

如果你使用 JS 访问本地文件，那是很麻烦的事情；实在要访问，用 flash 比较好。为了用户的安全，js是不允许访问本地文件的。就算flash，也要做相应的设置才行。你想一下，网络上来的页面，随便就能访问本地文件，那不是很危险吗？不经过用户同意就可以上传任意文件、甚至于修改、删除任意文件。

追问

哦，稍微明白，但我根本就不打算联网，只是加载一个本地html文件。
现在的问题是这样的：用android自带浏览器加载html，有声音没有图像。你知道怎么解决吗？

追答

用安卓自带浏览器看网络视频，有时也是有声音没图像，原因不清楚，也许是兼容性问题，也许是安卓系统本身缺陷。

本回答被提问者采纳 参考技术B 把视频放到手机SDCard的video目录中，source改为：file:///sdcard/video/c2.mp4，你是做phonegap+html5的应用么，我现在用Video.js这个插件，在Android手机上播放有声音无画面。

如何在视频播放器之外显示 video.js 控件

【中文标题】如何在视频播放器之外显示 video.js 控件

【英文标题】：how to display video.js controls outside of video player

【发布时间】：2020-12-08 18:36:29

【问题描述】：

我想自动播放视频并在视频播放器之外显示静音和全屏控制按钮。我无法做到这一点，因为为了使视频静音/取消静音或全屏播放，用户必须先与视频播放器进行交互。

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

这些是我的视频播放器选项：

  videoOptions: 
        // video player options
        autoplay: true,
        muted: true, // muted: true is required for autoplay
        loop: true,
        controls: true,
        sources: [],
        overlays: [],
        controlBar: 
          playToggle: false,
          captionsButton: false,
          chaptersButton: false,
          subtitlesButton: false,
          remainingTimeDisplay: false,
          progressControl: 
            seekBar: false
          ,
          fullscreenToggle: false,
          playbackRateMenuButton: false
        
      ,

【参考方案1】：

第一步是通过在 videoOptions 属性中将控件设置为 false 来隐藏视频播放器控件。

 videoOptions: 
    // video player options
    autoplay: true,
    muted: true, // muted: true is required for autoplay
    loop: false,
    controls: false, // showing controls in replay
    sources: [],
    overlays: [],
    fullscreen: false,
    controlBar: 
      playToggle: true,
      captionsButton: false,
      chaptersButton: false,
      subtitlesButton: false,
      remainingTimeDisplay: true,
      volumePanel: false,
      pictureInPictureToggle: false,
      progressControl: 
        seekBar: true
      ,
      fullscreenToggle: false,
      playbackRateMenuButton: false
    
  ,

然后在视频标签或播放器之外添加播放/暂停全屏按钮，并将点击事件侦听器附加到这些按钮，在我的情况下，我需要全屏、播放和静音按钮，它们可以在他们的点击侦听器中调用这些函数

this.player.requestFullscreen(); // request fullscreen
this.player.exitFullscreen(); // exit fullscreen


this.player().play(); // play button



this.player.muted(value); // mute button, value can be true or false

由于auto play policy，需要用户点击事件才能使它们工作，这是完整的，因为在点击列表器中调用了 pllay/fullscreen/muted 函数。