Как воспроизвести видеотег HTML5 в Кордове?
Это должно быть так просто, но после нескольких часов поиска в Google я не могу найти решение для воспроизведения внешнего видео в видеотеге html5 с использованием Cordova 12. Начинаем с нового проекта:
$ 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>
и, наконец, поместив простой тег видео html5 в index.html.
<!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]
Также убедитесь, что waterfall-video.mp4 имеет поддерживаемый видеокодек. Для гарантированного воспроизведения это должен быть H264. Некоторые файлы MP4 содержат видеокодек H265/HEVC и не воспроизводятся на некоторых устройствах.
Ответы 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>
Выход :
Спасибо, что сохранили мое здравомыслие. Я использовал эту страницу для видео, но при изучении источника ссылки, приведенные в статье, оказались не теми, которые они используют на странице.
Вам нужен https...