CODEWITHSUNDEEP
httpcordovapathhtml5-videoandroid-9.0-pie
Jinwoo Jeon
Jinwoo Jeon

Reputation: 1

How do I connect a http url string to src in HTML5 video tags on Android 9 version (API LEVEL 28) using Apache Cordova?

I'm developing a page for new workers to introduce my company on Android Studio. But I got a problem when connecting a http url string value to src of HTML5 video tags. As the title says, I'm using Apache Cordova. Below are the sauces I'm working on now. Is there anyone who can help me?

===

sample_basic.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com http://192.168.1.142:8080 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="../css/index.css">
<title>Hello World</title>
<script src="../js/cordova.js"></script>
<script src="../js/jquery-3.7.1.min.js"></script>
<script src="../js/sample_basic.js"></script>
<style>
.first {
    margin-left: 5%;
    margin-top: 33%;
    margin-bottom: 5%;
    width: 100vw;
    height: 25vw;
}

.first h1 {
    margin-bottom: 10%;
    width: 90vw;
    text-align: center;
}

.first textarea {
    width: 90vw;
    text-align: left;
    height: 17vw;
    padding-left: -50px;
}

.second {
    width: 100vw;
    height: 50vw;
    text-align; center;
    margin-top: 15%;
    margin-bottom: 10%;
}

.second video {
    width: 90vw;
    height: 50vw;
    margin-left: 5%;
    margin-top: 5%;
}

.third {
    width: 90vw;
    height: 25vw;
    text-align: center;
    margin-left: 5%;
    display: none;
}

.third textarea {
    width: 90vw;
    text-align: left;
    height: 12vw;
    padding-left: -50px;
    margin-top: 5%;
}

.fourth {
    width: 90vw;
    height: 25vw;
    text-align: center;
    margin-left: 5%;
    display: none;
}

.fourth button {
    width: 30vw;
    height: 10vw;
    text-align: center;
    color: white;
    background-color: blue;
}
</style>
</head>
<body>
<div>
    <div class="first">
        <h1>Intro VOD</h1>
        <textarea readonly>
* Your new VOD viewing for 2024 has been uploaded.
* Please watch the video below.
* If you don't finish watching it, you will not be able to move to the next page.
        </textarea>
    </div>
    <div class="second">
        <video id="myVideo" controls>
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        </video>
    </div>
    <div class="third">
        <textarea readonly>
* You've finished watching VOD.
* I'll save the record of your viewing results.
        </textarea>
    </div>
    <div class="fourth">
        <button id="vodYes">
            YES
        </button>
    </div>
</div>
</body>
</html>

AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest xmlns:tools="http://schemas.android.com/tools"
    android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="io.cordova.hellocordova" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:usesCleartextTraffic="false" android:networkSecurityConfig="@xml/network_security_config">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <uses-library android:name="org.apache.http.legacy"/>
    </application>
    <uses-sdk android:minSdkVersion="28" android:targetSdkVersion="28" />

</manifest>

network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2:8080</domain>
        <domain includeSubdomains="true">192.168.1.142:8080</domain>
        <domain includeSubdomains="true">localhost:8080</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">192.168.1.142</domain>
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

MainActivity.java

/*
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
 */

package io.cordova.hellocordova;

import android.os.Bundle;
import android.os.Environment;
import android.util.Log;

import org.apache.cordova.CordovaActivity;

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        // enable Cordova apps to be started in the background
        Bundle extras = getIntent().getExtras();
        if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
            moveTaskToBack(true);
        }

        // Temporal Setting
        launchUrl = "file:///android_asset/www/html/sample_basic.html";

        // Check paths
        String getDirectory = Environment.getExternalStorageDirectory() + "/Android/data";
        Log.i(getDirectory, "Directory: " + getDirectory); // /storage/emulated/0/Android/data

        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }
}

sample_basic.js

var watchTime = 0;
$(document).ready(function() {
    // initialization
    var video = $("#myVideo")[0];

    // Real-time viewer's viewing time record
    $(video).on('timeupdate', function() {
        watchTime = video.currentTime;
    });

    // Prevent viewers from manipulating the playback button slider backwards
    $(video).on('seeking', function(event) {
        // Move playback time to viewing time if slider is manipulated backwards
        if (watchTime < video.currentTime) {
            alert('A slider operation has been detected.\nAfter a while, play back from the previous viewing point.');
            video.currentTime = watchTime;
            video.play();
        }
    });

    // Processing events that occur when a video is played
    $(video).on('ended', function(event) {
        // Processed by comparing the maximum length of the video to the viewer's viewing time
        if (video.currentTime === video.duration) {
            // the content to be processed when the maximum length of the video matches the viewer's viewing time
            console.log("You have finished watching the video.");
            alert("You have finished watching the video.");
            $(".third").show();
            $(".fourth").show();
        }
    });
});
  1. I connected the video to the src property of the video tag in the directory path of the local PC, and it worked well.
  2. I changed the absolute path specified in number 1 above to the relative path, and it worked well.
  3. I connected localhost:8080, a domain path consisting of my IPv4 and the port number 8080, and an external http url path like "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" to that src, but it didn't work.

Upvotes: 0

Views: 31

Answers (0)

Related Questions