如何在Cordova中播放html5视频标签？

Question

这应该很简单，但是经过几个小时的谷歌搜索，我找不到使用 cordova 12 在 html5 视频标签中播放外部视频的解决方案。从一个新项目开始：

$ cordova create VideoTest com.example.videotest VideoTest
Creating a new cordova project.
$ cd VideoTest
$ cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: com.example.videotest
    Name: VideoTest
    Activity: MainActivity
    Android Target SDK: android-33
    Android Compile SDK: 33
Subproject Path: CordovaLib
Subproject Path: app
Android project created with [email protected]

然后将 AllowInlineMediaPlayback 添加到 config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.videotest" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>VideoTest</name>
    <description>Sample Apache Cordova App</description>
    <author email="[email protected]" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <preference name="AllowInlineMediaPlayback" value="true"/>
</widget>

最后在index.html中放置一个简单的html5视频标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src *; media-src *;style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    </head>
    <body>
        <video controls preload="metadata">
            <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
            Video not supported.
        </video>

        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

当我在手机（运行 Android 11）上构建并运行它时，我得到了“损坏的视频”图像

我显然遗漏了一些东西，但我找不到任何特定于科尔多瓦的文档。 [我需要视频内联播放，而不是全屏播放，所以我无法使用 cordova-plugin-video-player 插件]

Answer 1

您可以尝试这个html

<!DOCTYPE html>
<html>
 
<body>
  <center>
    <h1 style="color:green;">Test</h1>
    <h3>HTML video tag</h3>
    <p>Adding video on the webpage
    <p>
      <video width="450" height="250"
      controls preload="auto">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" 
                type="video/mp4">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" 
                type="video/webm">
      </video>
  </center>
</body>
 
</html>

输出：

预览

如何在Cordova中播放html5视频标签？

问题描述投票：0回答：1

1个回答

最新问题

如何在Cordova中播放html5视频标签？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1