Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Video v2 #2653

Closed
3 tasks done
ndonkoHenri opened this issue Feb 16, 2024 · 7 comments · Fixed by #2673
Closed
3 tasks done

Video v2 #2653

ndonkoHenri opened this issue Feb 16, 2024 · 7 comments · Fixed by #2673
Assignees
@ndonkoHenri
Labels
controls enhancement Improvement/Optimization

Comments

@ndonkoHenri
Copy link
Contributor

ndonkoHenri commented Feb 16, 2024 •
edited
Loading

  • show_controls Boolean prop
  • get video information (duration, position etc)
  • Subtitles
@ndonkoHenri ndonkoHenri mentioned this issue Feb 16, 2024
Merged
3 tasks
@ndonkoHenri ndonkoHenri self-assigned this Feb 16, 2024
@ndonkoHenri ndonkoHenri added enhancement Improvement/Optimization controls labels Feb 16, 2024
@bobwatcherx
Copy link

image
What if I click the button to increase the video duration by 10 seconds, next and previous. is there an example of the code?

@dhelbegor
Copy link

Suggestion.

What about support for subtitles. Like a .vtt file?
It would be great if the feature supports either path or href for the .vtt file too.

I found this example in the repository of media_kit. Maybe it can help :D.
https://github.com/media-kit/media-kit?tab=readme-ov-file#select-video-audio-or-subtitle-track

Basic examples
html

<!DOCTYPE html>
<html>
<head>
  <title>Vídeo com Legendas</title>
</head>
<body>
  <video controls>
    <source src="video.m3u8" type="application/x-mpegURL">
    <track src="legendas.vtt" kind="subtitles" srclang="pt" label="Português">
    Seu navegador não suporta o elemento de vídeo.
  </video>
</body>
</html>

react native

import React from 'react';
import { View, Text } from 'react-native';
import Video from 'react-native-video';

const App = () => {
  return (
    <View>
      <Video
        source={{ uri: 'https://example.com/video.m3u8' }}
        style={{ width: 300, height: 300 }}
        controls
        autoplay
      />
      <Text>Legendas</Text>
      <Video
        source={{ uri: 'https://example.com/legendas.vtt' }}
        style={{ width: 0, height: 0 }}
        textTracks={[
          {
            title: 'Português',
            language: 'pt',
            type: 'text/vtt',
            uri: 'https://example.com/legendas.vtt',
          },
        ]}
        selectedTextTrack={{ type: 'language', value: 'pt' }}
      />
    </View>
  );
};

export default App;

@dhelbegor
Copy link

Suggestion.

Support for pause when clicking directly on the video.

I'm using the web version of flet. If I want to play/pause the video I have to click directly on the play button(located at the bottom left of the video). Would be great to have the option to click play/pause.

@ndonkoHenri ndonkoHenri moved this to 🏗 In progress in Flet Development Feb 19, 2024
@ndonkoHenri ndonkoHenri mentioned this issue Feb 21, 2024
Merged
4 tasks
@ndonkoHenri ndonkoHenri linked a pull request Feb 21, 2024 that will close this issue
LottieControl and Video v2 #2673
Merged
4 tasks
@ndonkoHenri
Copy link
Contributor Author

@bobwatcherx concerning your request, I added Video.get_duration(). You will be able to use it with seek() to move from one + or - 10 seconds.

@dhelbegor I added the possibility to configure video subtitles (local asset file and url).

Bildschirmaufnahme2024-02-21um14 48 24-ezgif com-video-to-gif-converter

Hope it helps...

@dhelbegor
Copy link

Thank you very much :D

@bobwatcherx
Copy link

why this still not work

Traceback (most recent call last):
  File "C:\Users\LENOVO\AppData\Local\Programs\Python\Python311\Lib\threading.py", line 1045, in _bootstrap_inner
    self.run()
  File "C:\Users\LENOVO\AppData\Local\Programs\Python\Python311\Lib\threading.py", line 982, in run
    self._target(*self._args, **self._kwargs)
  File "C:\Users\LENOVO\Pictures\mainan\fletaps\fletaudio\main.py", line 24, in <lambda>
    on_click=lambda _:print(load_video.content.get_duration())
                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
AttributeError: 'Video' object has no attribute 'get_duration'

code

from flet import *


def main(page:Page):
	page.window_width = 300

	sample_videos = VideoMedia("assets/video.wmv")


	load_video = Container(
		content=Video(
			expand=True,
			playlist=sample_videos,
			aspect_ratio=16 / 9,
			autoplay=True,
			)
		)	


	page.add(
		Column([
			load_video,
			ElevatedButton("sett minutes",
				on_click=lambda _:print(load_video.content.get_duration())
				)
			])
		)


app(main,view=AppView.WEB_BROWSER,port=5050,assets_dir="assets")

@ndonkoHenri
Copy link
Contributor Author

The related PR hasn't yet been merged.

@ndonkoHenri ndonkoHenri moved this from 🏗 In progress to 👀 In review in Flet Development Feb 22, 2024
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in Flet Development Mar 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ndonkoHenri ndonkoHenri

Labels
controls enhancement Improvement/Optimization
Projects
Flet Development
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

LottieControl and Video v2 flet-dev/flet
3 participants
@dhelbegor @bobwatcherx @ndonkoHenri