Question

我正在制作一个网站 named bobPlayer，但出于某种原因，它不会加载通过 HTTPS 传输的 MP4 文件。它仅显示以下内容：Link to screenshot of player.

尝试按播放按钮或按空格不会播放视频。

视频效果很好when caching is disabled via DevTools in chrome.

在我的实际 HTML 代码的标题部分中，我包含以下元标记，但 Chrome 仍然拒绝播放视频：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body>
        <div class="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>
    </body>
</html>

iOS 上的 Safari/Chrome 中不会出现此问题，但是我和其他 2 位朋友在 PC 上遇到了此问题。（特别是 Chrome，它似乎在 Firefox 中运行良好。）

托管这些视频的服务器运行 Ruby，并通过 HTTPS 进行身份验证，因为该网站不允许 HTTP 和 HTTPS 的混合内容。

服务器托管这些视频的 MP4 文件。这不应该是我的问题的原因，因为所有现代网络浏览器都支持 MP4。服务器正在使用以下命令在命令行中运行 Ruby：

<x-guest-layout> <script> function alerta() {//This Work Swal.fire("Hello World Sweetalert2");//This Work $('.lol').hide();//This Work } $(function() {//$ This not Work console.log( "ready!" ); }); Swal.fire("Hello World Sweetalert2");//This not Work </script> <x-jet-button onclick="alerta()" class="lol">Alert</x-jet-button> </x-guest-layout>

网页通过脚本决定播放哪个视频，该脚本将网址标记 <meta http-equiv="Cache-Control" content="private, no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> 与 JSON 文件中托管的网址相匹配。尝试播放的视频在 1-405 的限制内。如果尝试通过非动态分配的标签播放视频，也会出现此问题，其中源文件被编码到 HTML 文件中，而不是替换为 JS 代码。

所有代码都在 GitHub 上提供，但是视频不在那里托管，而是在前面提到的 a Ruby httpd server 上托管。

任何帮助将不胜感激。

Answer 1

我敢打赌这是视频格式问题。 iOS 支持所有浏览器中的 h265 编码，而 Windows 上的 Chrome 不支持。视频文件的编码是什么？您可以使用 https://ffprobe.a.video 进行测试（并添加视频的网址）。

除非在 DevTools 中启用“禁用缓存”，否则 HTML 嵌入视频不会播放

1 个答案: