Popular New Releases in Video Player
GSYVideoPlayer
v8.2.0-release-jitpack
PlayerBase
2021/01/20 v3.4.2
JZVideo
常规版本
SaltPlayerSource
7.0.0-alpha08-2022033101
ExoVideoView
2.1.6
Popular Libraries in Video Player
by CarGuo java
17347 Apache-2.0
视频播放器(IJKplayer、ExoPlayer、MediaPlayer),HTTPS,支持弹幕,外挂字幕,支持滤镜、水印、gif截图,片头广告、中间广告,多个同时播放,支持基本的拖动,声音、亮度调节,支持边播边缓存,支持视频自带rotation的旋转(90,270之类),重力旋转与手动旋转的同步支持,支持列表播放 ,列表全屏动画,视频加载速度,列表小窗口支持拖动,动画效果,调整比例,多分辨率切换,支持切换播放器,进度条小窗口预览,列表切换详情页面无缝播放,rtsp、concat、mpeg。
by Doikki java
3572 Apache-2.0
Android Video Player. 安卓视频播放器,封装MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音并实现预加载,列表播放,悬浮播放,广告播放,弹幕
by jiajunhui java
2777 Apache-2.0
The basic library of Android player will process complex business components. The access is simple。Android播放器基础库,专注于播放视图组件的高复用性和组件间的低耦合,轻松处理复杂业务。
by jianjunxiao java
2074
IjkPlayer/MediaPlayer+TextureView,支持列表,完美切换全屏、小窗口的Android视频播放器
by xiaoyanger0825 java
1995
IjkPlayer/MediaPlayer+TextureView,支持列表,完美切换全屏、小窗口的Android视频播放器
by Jzvd java
1715 MIT
高度自定义的安卓视频框架 MediaPlayer exoplayer ijkplayer ffmpeg
by eneim java
1387 Apache-2.0
Video list auto playback made simple, specially built for RecyclerView
by waynell java
1308 MIT
Play video in ListView or RecyclerView
by mpenkov c
1091
A set of tutorials that demonstrates how to write a video player based on FFmpeg
Trending New libraries in Video Player
by Moriafly kotlin
460 GPL-3.0
Salt Player Update
by Core-2-Extreme c
97
Video player for 3ds
by videogular typescript
74 MIT
The HTML5 video player for Angular 2 and successor to videogular2
by LuD1161 java
64 GPL-3.0
This is where I share code/material shown in my videos
by liyang5945 javascript
63
a video player could synchronizing play with others 可以异地同步播放视频的播放器。
by halilozercan kotlin
54
A sample Video Player with complete gestures and controls support, written in Jetpack Compose
by lKinderBueno javascript
43
Streamity.tv XTREAM Api. Advanced IPTV webplayer fully customizable with easy installer
by yoobi kotlin
37
Exoplayer in Kotlin fullscreen and quality selector
by snakewiz typescript
26 MIT
A flexible player customization script for FiveM.
Top Authors in Video Player
1
2 Libraries
10
2
2 Libraries
56
3
2 Libraries
760
4
2 Libraries
20
5
2 Libraries
4
6
2 Libraries
5
7
1 Libraries
43
8
1 Libraries
2
9
1 Libraries
2
10
1 Libraries
5
1
2 Libraries
10
2
2 Libraries
56
3
2 Libraries
760
4
2 Libraries
20
5
2 Libraries
4
6
2 Libraries
5
7
1 Libraries
43
8
1 Libraries
2
9
1 Libraries
2
10
1 Libraries
5
Trending Kits in Video Player
JavaScript video players began appearing in more web applications. But the first popular library to embrace the technology was Flowplayer in 2006. Flowplayer became popular with web developers. It enables them to integrate video ads, social sharing buttons, and analytics tracking. It pioneered the concept of native HTML5 playback. It allows videos to reach viewers with less latency and buffering issues.
JSVPLs had made it easier for developers to embed and configure media players. One of the most popular ones is mediaelement.js. It has robust features like cross-platform support, adaptive streaming, and visual effects.
With the advent of HTML5, JSVPLs have become more accessible. JSVPLs help improve a website's performance and user experience. It allows web developers to use HTML5 and JavaScript. It helps create custom media players tailored to their specific applications and needs. It allows streaming in-browser rather than relying on an external player to load content.
Most JavaScript video player libraries will provide playback controls. It happens when a control bar with pause, play and seek buttons or keyboard shortcuts. Generally, the playback controls are accessible through the player API. It happens because you can create customized controls for the player. These libraries provide pre-made UI elements. It can give the video a native look and feel on desktop and mobile devices.
Different types of videos can be played with the JavaScript video player library:
- HTML5 Video
HTML5 video is the most used type across the web. It is playable in most web browsers through the Video element in HTML5. This video type is great for delivering high-quality content without any plugins.
- Native Video
Native video is a video that is encoded and stored within the native format of the device. This type of video has been used online in formats such as Flash Video (FLV) and Windows Media Video (WMV). Portable versions of this video type on devices using the HTML5 Video element. While this type of video does offer great quality, it is not supported by all browsers.
- Adaptive Streaming Video
Adaptive streaming video is a technology type. It's where video content is adjusted based on the user's network speed. It offers users an uninterrupted streaming experience. Some well-known streaming services use this type of streaming video. The HTML5 video element offers support for adaptive streaming.
Cloudinary is a content delivery network (CDN) with extensive video support. It provides high-quality video playback across desktop and mobile devices. The library supports MP4 and WebM file formats, along with Vitepress PDF documents. The library supports many streaming formats for browsers that don't support the formats. It supports adaptive bitrate streaming. There are some exciting features, such as picture-in-picture support, autoplay, Chromecast, and more.
One of the most popular and used JavaScript video players is Wistia. Wistia provides an embeddable video player supported by desktop and mobile devices. It supports HLS streaming and progressive downloading in both MP4 and WebM formats.
Elite Video Player is a video player used in websites, mobile, and native applications. It provides features like adaptive bitrate streaming formats and many player options. It also offers playback control, player-level customization, an extensible media library, and more. The video player requires no extra libraries like jQuery, Angular, or React.
Many video players libraries support streaming technologies like HLS, MPEG-DASH, and MSE/EME. JavaScript-based applications can leverage these libraries to implement adaptive bitrate streaming playback. It can switch the video streaming quality. It helps match the current screen size and internet connection speed. It can create video playback controls and add support for un-supported formats. Also, libraries support custom plugin development. The developers can create features like autoplay, full-screen mode, and progress bar.
Different video player libraries come with different capabilities and research. Here are some tips for using the JavaScript video player library:
1. Consider the necessary features.
2. Use the right player for the browser and evaluate the cost.
3. Consider user experience and get support.
The best way to use a JavaScript video player library is to start with simple tasks. You can build up to more complex projects.
- Start by familiarizing yourself with the library's basic programming concepts and use cases. It can be understanding how to place, play, pause a video, or adjust audio settings.
- After that, you can move on to more complex projects. You can configure custom navigation functions, create a playlist, or add custom controls.
- Learn the core features and explore example videos or tutorials online.
- Allow yourself the flexibility to experiment and take advantage of the available options. You can make the most of any JS video player library with patience and practice.
When writing about this library, the key points to include the following:
1. Overview: describe what the library offers, such as features and usability
2. Benefits: outline the advantages of using the library compared to another solution
3. Integrations: discuss the library's integration possibilities with other platforms
4. Setup: explain the installation process and prerequisites for using the library
5. Usage: provide an overview of the library's features and how to use them
6. Examples: provide code snippets and a demo video of how the library works
7. Security: explain the security options in place to protect user data
8. Support: give information on how to access online help and customer support.
HLS client allows users to access streaming content on the web using HTTP Live Streaming. It can deliver high-definition video content to streaming video providers. The technology is used in modern streaming formats like MPEG-DASH, Adobe Flash, and HLS. The client provides a comprehensive solution for playing media files. It enables users to access Media Source Extensions and Encrypted Media Extensions are available.
YouTube Player is a popular open-source JavaScript library for playing YouTube videos. It offers features like automatic playback, customizing playback, and control over playback speed. It provides APIs for customizing the playback experience and integrating it.
Vimeo Player provides a JavaScript library. This library controls the Vimeo player's video properties and behavior within their code. It allows developers to create and integrate a custom Vimeo player into applications.
An iframe is an HTML document embedded inside another HTML document on a web page. It is often used to embed content from another source, such as an advertisement, video, or audio file. Additionally, the iframe API provides features like autoplay, progress bars, and custom styling. They also offer advanced options such as full-screen mode and aspect ratio adjustments. It makes it easy to create video players compatible with various devices.
The aspect ratio helps set the ratio of a video's width to its height. The aspect ratio is expressed as two numbers separated by a colon, such as 16:9. The aspect ratio can force a given video size, regardless of size. Sometimes, the aspect ratio can be adjusted using JavaScript or the provided API.
The importance of using this library for web development cannot be overstated. It provides a way to manage the essential elements of web-based videos. It includes streaming, media playback, and post-production management. By leveraging the library's capabilities, applications can be created. It can be from home media automation solutions to educational video kiosks. You can also create enterprise video presentations. Regardless of the application, the library streamlines the development process. It can help developers create video-based functionality to engage and delight users.
Let's look at each library in detail. The links allow you to access package commands, installation notes, and code snippets.
video.js
- It has a responsive layout to be viewed on any device, regardless of screen size.
- Includes plugins and addons to customize the player to their needs and preferences.
- It integrates with popular services to embed videos into their pages.
plyr
- Allows to be configured with advanced playlist functionality.
- They are optimized for easy control with a keyboard and mouse.
- Are optimized for captions and subtitles.
DPlayer
- It provides many options for customizing the user experience.
- It is a lightweight video player that only weighs 11.7KB, minified and gzipped.
- Supports HTML5, Flash, and other third-party video players.
wavesufer.js
- It offers a set of audio functions to generate waveforms from audio.
- Allows to integrate playlists to group audio files into one area.
- Features an equalizer analyzer to shape the audio. Features help get visual feedback on its effectiveness.
jPlayer
- Allows playlist support, many skins or themes, and integration with different skin formats.
- Supports DRM (digital rights management) and streaming audio and video formats.
- It has features such as Chromecast, Airplay, and DASH streaming support.
jwplayer
- Supports HTML5 video on iOS and Android. Supports rich-media playback using Flash on all other platforms.
- Offers a slate of integrations with video and data analytics providers.
- It supports advanced DRM and DASH streaming and closed captioning. It supports subtitle support, delayed playback, custom skins, setting playback rate, and quality.
flowplayer
- Supports HLS (m3u8), RTMP/RTSP streaming, Apple HTTP Live Streaming (HLS), and MPEG-DASH (MP4).
- It can be embedded into websites and web applications. It allows video streaming across any web browser.
- Allows you to protect your videos and control who can watch the content.
FAQ
How does an HTML5 video player work?
An HTML5 video player uses a combination of HTML5 tags and attributes. JavaScript to play video files. When a web page is loaded, the HTML5 tags and attributes. JavaScript code embedded in the page instructs the browser to create a video player. When a user clicks on, or presses play on the video, the video is delivered to the user's computer. The video is then streamed from the browser window to the user's screen, allowing them to view it.
What are the benefits of Cloudinary video players over other JavaScript players?
Cloudinary video players offer many benefits over other JavaScript video players, such as:
- Scalable performance allows adaptation to different screen sizes, devices, and networks.
- Full control over user experience. It happens with the ability to customize styling, thumbnails, and links.
- Automated transcoding of videos. It helps deliver them in the most suitable format for the device.
- Real-time analytics on video engagement, including the number of views, likes, and shares.
- Easy integration with both Cloudinary's and other platforms' APIs.
- Advanced features such as time-lapse videos and splash images
- Ability to monetize videos through ads and to protect content with DRM.
Can you create a custom video player with JavaScript?
Yes, it is possible to create a custom video player with JavaScript. HTML5's <video> tags, JavaScript events, and API can customize the video player functionality. The user can create custom play/pause, seek bars, caption display, and video source files. Web developers can use third-party frameworks to customize a video player.
Do JavaScript video players support modern streaming formats?
JavaScript video players often support many streaming technologies for various streaming technologies. Yes, many players support modern streaming formats. Many JavaScript video players use open-source streaming technologies. It offers better compatibility with platforms and streaming protocols.
What is an extensible media player, and why would I want to use one?
An extensible media player is a software application. It allows users to extend the player's capabilities with addons or custom plugins. This means users can personalize and manipulate the media player. It helps customize playback, media management, and playback options. It gives the user greater control over how the content is enjoyed. Extensible media players can enable playback of video not supported by the application. It supports various streaming platforms. Users can make the media player their own with an extensible media player. They can enjoy the content they want how they want.
Is it possible to integrate YouTube videos into a JavaScript video player library?
It is possible to integrate YouTube videos into a JavaScript video player library. YouTube provides a JavaScript API. It helps developers can use to control and customize the YouTube video player. For example, developers can cue and play YouTube videos. They can add annotations and change the player controls. They can listen to events triggered when an action occurs. Many open-source video player libraries help display YouTube videos within a custom UI.
What are the best practices for optimizing video playback using a JavaScript library?
- Ensure a low latency connection:
A low latency connection will minimize buffering and improve video playback quality. You can use CDNs or reduce the distance between playback and viewers.
- Take advantage of caching:
Remy Shinn explains: "Use caching for accessed content. It reduces the requests and data transfer needed every time a video is seen."
- Optimize video resolution:
You should select an optimal resolution. It helps reduce the amount of data transferred. It prevents video artifacts like pixelation and smudging.
- Implement adaptive streaming:
Adaptive streaming helps determine the optimal video bitrate. It depends on the end user's bandwidth and device capabilities. It delivers the best video experience.
- Take advantage of streaming protocols:
Seek out protocols like HLS and DASH to help stream high-quality video hassle-free.
- Leverage hardware acceleration:
Try to use the hardware acceleration support of your players to the fullest. This will improve video playback performance as much as tenfold. It will ensure that the dedicated video and graphics processors can handle decoding & scaling.
- Limit JavaScript executions.
Minimize the number of JavaScript-based operations on the page while the video plays back.
- Minimize requests:
To reduce network latency, minimize the HTTP requests for resources. It allows smooth video playback.
- Monitor playback:
Monitor playback performance at all times to detect and address potential issues.
Are browser controls available with certain JavaScript libraries for playing videos?
Generally speaking, the answer to this question is no. JavaScript libraries usually do not provide native support for controlling or playing videos. Some frameworks have built-in APIs that enable developers to access video playback controls. But, some libraries, such as Plyr, provide an API for playing videos. This API can add custom functions and features to the video player.
How can you create a reusable video component using existing libraries?
A reusable video component can be created using libraries like React MediaPlayer. React MediaPlayer is an intuitive video library with an HTML5 video player. It can be customized with props and embedded videos in React applications. MediaPlayer also supports many video formats, such as MP4, WebM, and Ogg. It provides methods to control video playback. It includes pause, play, replay, mute/unmute, volume control, and more. Using MediaPlayer, developers can create a reusable video component. It can be integrated into React applications.
What features should we consider when selecting a suitable library? For developing a custom video player application in JavaScript?
- Support for many video formats:
The library should support MP4, WebM, and Ogg to ensure wider user compatibility.
- Responsive playback:
The library should allow for responsive playback. It allows the best viewing experience, no matter the device.
- Adaptability:
The library should be flexible enough to allow for customization. The customizations like playing back videos and skins to customize the player's appearance.
- Cross-platform compatibility:
The library should be compatible with desktop and mobile devices. It helps to use the video player on any platform.
- Embeddable:
The library should allow for embedding video content on web pages. It will allow users to share the video player with others.
- Performance:
The library should provide good performance. It should have fast loading times and minimal lag while playing videos.
Trending Discussions on Video Player
How to generate video preview thumbnails using nodejs and ffmpeg?
Properly querying MediaStore records on Android 11
Javascript problem with finding html elements from source code of another website
Positioning of the youtube video
PyQt5: How to detect if QSlider is dragged to the end
Typo3 CKeditor <iframe> YouTube video issue
How do i open srt file on flutter?
Make total video duration instantly known in video player (ffmpeg / html)
use vlcj-javafx-demo develop a player, but it looks some components UI not update correctly when set full screen
Replacing YouTube HTML links with embed code
QUESTION
How to generate video preview thumbnails using nodejs and ffmpeg?
Asked 2022-Mar-27 at 18:50I am creating a custom video player, I would like to add a video preview when the user hovers a progress bar.
I am able to generate thumbnails using FFmpeg as follows.
1ffmpeg -i input -filter_complex \
2 "select='not(mod(n,60))',scale=240:-1,tile=layout=4x8" \
3 -vframes 1 -q:v 2 outputfile.jpg
4
PROBLEM
To use the above-created sprite image(combined thumbnails), I need to generate a WEBVTT
which contains thumbnails and frames time interval like this below.
1ffmpeg -i input -filter_complex \
2 "select='not(mod(n,60))',scale=240:-1,tile=layout=4x8" \
3 -vframes 1 -q:v 2 outputfile.jpg
4WEBVTT
5
600:00:00.000 --> 00:00:03.000
7thumbnails.jpg#xywh=0,0,120,68
8
900:00:03.000 --> 00:00:06.000
10thumbnails.jpg#xywh=120,0,120,68
11
1200:00:06.000 --> 00:00:09.000
13thumbnails.jpg#xywh=240,0,120,68
14
I am not able to find any FFmpeg command or tutorial on how to create such WEBVTT file using node-js and FFmpeg.
Maybe someone here knows the solution to this problem? any help will be appreciated.
ANSWER
Answered 2022-Mar-27 at 18:50You will have to make your own tool for creating the WEBVTT file. And it's a simple process, you just need to get the information you need and fill it in the following format:
1ffmpeg -i input -filter_complex \
2 "select='not(mod(n,60))',scale=240:-1,tile=layout=4x8" \
3 -vframes 1 -q:v 2 outputfile.jpg
4WEBVTT
5
600:00:00.000 --> 00:00:03.000
7thumbnails.jpg#xywh=0,0,120,68
8
900:00:03.000 --> 00:00:06.000
10thumbnails.jpg#xywh=120,0,120,68
11
1200:00:06.000 --> 00:00:09.000
13thumbnails.jpg#xywh=240,0,120,68
1400:00:00.000 --> 00:00:03.000
15thumbnails.jpg#xywh=0,0,120,68
16
and then save the file.
Example:
Let's say you have a video that's 60 seconds long. You use ffmpeg to generate 10 thumbnails.
You write a short program (in this case Node.js) that loops based on the number of thumbnails following the above format a manner similar to this:
1ffmpeg -i input -filter_complex \
2 "select='not(mod(n,60))',scale=240:-1,tile=layout=4x8" \
3 -vframes 1 -q:v 2 outputfile.jpg
4WEBVTT
5
600:00:00.000 --> 00:00:03.000
7thumbnails.jpg#xywh=0,0,120,68
8
900:00:03.000 --> 00:00:06.000
10thumbnails.jpg#xywh=120,0,120,68
11
1200:00:06.000 --> 00:00:09.000
13thumbnails.jpg#xywh=240,0,120,68
1400:00:00.000 --> 00:00:03.000
15thumbnails.jpg#xywh=0,0,120,68
16const fs = require('fs')
17const moment = require('moment')
18
19let video_length = 60
20let number_of_thumbnails = 10
21let thumb_interval = video_length/number_of_thumbnails // so 6 seconds per thumbnail
22
23let sprite_width = 600 // Values are assumed based each thumbnail having
24let sprite_height = 340 //a width of 120 and a height of 68 with a total of 10
25
26let start_time = moment('00:00:00', "HH:mm:ss.SSS")
27let end_time = moment('00:00:00', "HH:mm:ss.SSS").add(thumb_interval , 'seconds')
28
29let thumb_output = "WEBVTT\n\n"
30
31for(let i=0;i<=(sprite_height /68);i++){
32 for(let j=0;j<=(sprite_width/120);j++){
33
34 thumb_output +=start_time.format("HH:mm:ss.SSS") +" --> "+ end_time.format("HH:mm:ss.SSS")+"\n"
35
36 thumb_output += "thumbnails.jpg#xywh="+(j*120)+","+(i*68)+",120,68\n\n"
37
38 start_time.add(thumb_interval , 'seconds')
39 end_time.add(thumb_interval , 'seconds')
40 }
41}
42
43fs.writeFileSync('thumbnails.vtt', thumb_output)
44
The library Moment.js was used for simplifying the time incrementation & format
QUESTION
Properly querying MediaStore records on Android 11
Asked 2022-Mar-20 at 12:56I am working on providing Android 11 support on my audio/video player app. My main concern is actually with not provoking the Google tribe with their no All files access
permission allowed for player apps. I do not want my app to be rejected on publishing on the Google store.
In previous APIs, I am using WRITE_EXTERNAL_STORAGE
permission including Android 10 (where I opt out off Scoped Storage). Though, I do not know how to handle Android 11 without having my app rejected on publishing on Google store. I have learned that READ_EXTERNAL_STORAGE
permission is needed for querying MediaStore
records and I have the following questions:
- Will asking for
READ_EXTERNAL_STORAGE
on runtime on Android 11 be acceptable with Google (when I publish my app on their store)? - Can I ask for
WRITE_EXTERNAL_STORAGE
permission on runtime instead ofREAD_EXTERNAL_STORAGE
for all APIs and the system on Android 11 devices would substitute that forREAD_EXTERNAL_STORAGE
or will I need to add conditions where I ask forREAD_EXTERNAL_STORAGE
on Android 11 devices. - Will asking for
WRITE_EXTERNAL_STORAGE
on runtime on Android 11 be acceptable with Google (when I publish my app on their store)?
ANSWER
Answered 2022-Mar-20 at 12:48you may use all these permissions without any ban from Google. you can't/shouldn't use MANAGE_EXTERNAL_STORAGE
, new perm dedicated for Scoped Storage and file managing apps, antivirs and other "privileged" soft
QUESTION
Javascript problem with finding html elements from source code of another website
Asked 2022-Mar-18 at 12:43I am having trouble finding individual html elements from the downloaded source code of a selected page. When I use the function $(data).find('p').length
it returns me the number 2 which is the correct answer, but if I use the function $(data).find('img').length
it returns me 0 and it should be 1.
1async function getErrors() {
2 await $.ajax({
3 url: 'http://example.com',
4 method: 'get'
5 })
6 .done(async (siteText) => {
7 var data = $.parseHTML(siteText);
8 console.log(data);
9 console.log($(data).find('p').length);
10 console.log($(data).find('img').length);
11 await axios.get('http://anothersite.com')
12 .then((response) => {
13 //do something...
14 });
15 });
16}
17
Live example:
1async function getErrors() {
2 await $.ajax({
3 url: 'http://example.com',
4 method: 'get'
5 })
6 .done(async (siteText) => {
7 var data = $.parseHTML(siteText);
8 console.log(data);
9 console.log($(data).find('p').length);
10 console.log($(data).find('img').length);
11 await axios.get('http://anothersite.com')
12 .then((response) => {
13 //do something...
14 });
15 });
16}
17var siteText = `<!DOCTYPE html>
18<html lang="pl">
19<head>
20 <meta charset="UTF-8">
21 <meta http-equiv="X-UA-Compatible" content="IE=edge">
22 <meta name="viewport" content="width=device-width, initial-scale=1.0">
23 <title>Test Site</title>
24 <style>
25 .black{
26 background-color: black;
27 color: #333131;
28 }
29 </style>
30</head>
31<body>
32 <h1>Strona Testowa</h1>
33 <div>
34 <h2>Lorem Ipsum</h2>
35 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis aenean et tortor at risus. Pellentesque habitant morbi tristique senectus. Nisi est sit amet facilisis. Vel elit scelerisque mauris pellentesque pulvinar. Quisque egestas diam in arcu. Elit at imperdiet dui accumsan sit amet nulla. Urna porttitor rhoncus dolor purus non enim praesent elementum. Velit dignissim sodales ut eu sem integer vitae justo eget. Lacus suspendisse faucibus interdum posuere lorem. Et ultrices neque ornare aenean euismod. Porttitor eget dolor morbi non. Sit amet consectetur adipiscing elit. Amet nisl suscipit adipiscing bibendum est. Eu non diam phasellus vestibulum. Neque convallis a cras semper auctor. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Et molestie ac feugiat sed lectus vestibulum. Adipiscing diam donec adipiscing tristique risus nec. Imperdiet proin fermentum leo vel. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Elementum integer enim neque volutpat ac tincidunt vitae semper. Nam libero justo laoreet sit. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Et sollicitudin ac orci phasellus egestas tellus. Nunc sed augue lacus viverra vitae congue eu. Dui vivamus arcu felis bibendum ut. Mattis nunc sed blandit libero volutpat sed. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Quam vulputate dignissim suspendisse in est ante in nibh. Accumsan sit amet nulla facilisi morbi. Ac ut consequat semper viverra. Viverra tellus in hac habitasse platea dictumst. Donec ultrices tincidunt arcu non sodales neque. In est ante in nibh mauris. Mattis enim ut tellus elementum sagittis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Sed id semper risus in. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Vitae tempus quam pellentesque nec nam aliquam sem et tortor. In arcu cursus euismod quis viverra nibh cras. Sit amet consectetur adipiscing elit duis tristique. Augue ut lectus arcu bibendum at varius vel pharetra vel. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Libero nunc consequat interdum varius sit amet mattis vulputate. Netus et malesuada fames ac. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Duis convallis convallis tellus id interdum velit laoreet. Et tortor consequat id porta nibh venenatis cras. Laoreet sit amet cursus sit amet dictum sit amet justo.</p>
36 </div>
37 <img src="https://png.pngtree.com/png-clipart/20190108/ourmid/pngtree-tree-green-plant-photography-png-png-image_305004.jpg" >
38 <iframe width="560" height="315" src="https://www.youtube.com/embed/gK8s4LUJ7NE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
39 <div class="black">
40 <p class="black">Lorem Ipsum</p>
41 </div>
42</body>
43</html>`;
44
45var data = $.parseHTML(siteText);
46console.log(data);
47console.log($(data).find('p').length);
48console.log($(data).find('img').length);
1async function getErrors() {
2 await $.ajax({
3 url: 'http://example.com',
4 method: 'get'
5 })
6 .done(async (siteText) => {
7 var data = $.parseHTML(siteText);
8 console.log(data);
9 console.log($(data).find('p').length);
10 console.log($(data).find('img').length);
11 await axios.get('http://anothersite.com')
12 .then((response) => {
13 //do something...
14 });
15 });
16}
17var siteText = `<!DOCTYPE html>
18<html lang="pl">
19<head>
20 <meta charset="UTF-8">
21 <meta http-equiv="X-UA-Compatible" content="IE=edge">
22 <meta name="viewport" content="width=device-width, initial-scale=1.0">
23 <title>Test Site</title>
24 <style>
25 .black{
26 background-color: black;
27 color: #333131;
28 }
29 </style>
30</head>
31<body>
32 <h1>Strona Testowa</h1>
33 <div>
34 <h2>Lorem Ipsum</h2>
35 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis aenean et tortor at risus. Pellentesque habitant morbi tristique senectus. Nisi est sit amet facilisis. Vel elit scelerisque mauris pellentesque pulvinar. Quisque egestas diam in arcu. Elit at imperdiet dui accumsan sit amet nulla. Urna porttitor rhoncus dolor purus non enim praesent elementum. Velit dignissim sodales ut eu sem integer vitae justo eget. Lacus suspendisse faucibus interdum posuere lorem. Et ultrices neque ornare aenean euismod. Porttitor eget dolor morbi non. Sit amet consectetur adipiscing elit. Amet nisl suscipit adipiscing bibendum est. Eu non diam phasellus vestibulum. Neque convallis a cras semper auctor. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Et molestie ac feugiat sed lectus vestibulum. Adipiscing diam donec adipiscing tristique risus nec. Imperdiet proin fermentum leo vel. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Elementum integer enim neque volutpat ac tincidunt vitae semper. Nam libero justo laoreet sit. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Et sollicitudin ac orci phasellus egestas tellus. Nunc sed augue lacus viverra vitae congue eu. Dui vivamus arcu felis bibendum ut. Mattis nunc sed blandit libero volutpat sed. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Quam vulputate dignissim suspendisse in est ante in nibh. Accumsan sit amet nulla facilisi morbi. Ac ut consequat semper viverra. Viverra tellus in hac habitasse platea dictumst. Donec ultrices tincidunt arcu non sodales neque. In est ante in nibh mauris. Mattis enim ut tellus elementum sagittis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Sed id semper risus in. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Vitae tempus quam pellentesque nec nam aliquam sem et tortor. In arcu cursus euismod quis viverra nibh cras. Sit amet consectetur adipiscing elit duis tristique. Augue ut lectus arcu bibendum at varius vel pharetra vel. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Libero nunc consequat interdum varius sit amet mattis vulputate. Netus et malesuada fames ac. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Duis convallis convallis tellus id interdum velit laoreet. Et tortor consequat id porta nibh venenatis cras. Laoreet sit amet cursus sit amet dictum sit amet justo.</p>
36 </div>
37 <img src="https://png.pngtree.com/png-clipart/20190108/ourmid/pngtree-tree-green-plant-photography-png-png-image_305004.jpg" >
38 <iframe width="560" height="315" src="https://www.youtube.com/embed/gK8s4LUJ7NE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
39 <div class="black">
40 <p class="black">Lorem Ipsum</p>
41 </div>
42</body>
43</html>`;
44
45var data = $.parseHTML(siteText);
46console.log(data);
47console.log($(data).find('p').length);
48console.log($(data).find('img').length);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
ANSWER
Answered 2022-Mar-17 at 10:16I tried with your code with another site and that's working fine. I modified your JS to temporary get rid of async/await:
1async function getErrors() {
2 await $.ajax({
3 url: 'http://example.com',
4 method: 'get'
5 })
6 .done(async (siteText) => {
7 var data = $.parseHTML(siteText);
8 console.log(data);
9 console.log($(data).find('p').length);
10 console.log($(data).find('img').length);
11 await axios.get('http://anothersite.com')
12 .then((response) => {
13 //do something...
14 });
15 });
16}
17var siteText = `<!DOCTYPE html>
18<html lang="pl">
19<head>
20 <meta charset="UTF-8">
21 <meta http-equiv="X-UA-Compatible" content="IE=edge">
22 <meta name="viewport" content="width=device-width, initial-scale=1.0">
23 <title>Test Site</title>
24 <style>
25 .black{
26 background-color: black;
27 color: #333131;
28 }
29 </style>
30</head>
31<body>
32 <h1>Strona Testowa</h1>
33 <div>
34 <h2>Lorem Ipsum</h2>
35 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis aenean et tortor at risus. Pellentesque habitant morbi tristique senectus. Nisi est sit amet facilisis. Vel elit scelerisque mauris pellentesque pulvinar. Quisque egestas diam in arcu. Elit at imperdiet dui accumsan sit amet nulla. Urna porttitor rhoncus dolor purus non enim praesent elementum. Velit dignissim sodales ut eu sem integer vitae justo eget. Lacus suspendisse faucibus interdum posuere lorem. Et ultrices neque ornare aenean euismod. Porttitor eget dolor morbi non. Sit amet consectetur adipiscing elit. Amet nisl suscipit adipiscing bibendum est. Eu non diam phasellus vestibulum. Neque convallis a cras semper auctor. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Et molestie ac feugiat sed lectus vestibulum. Adipiscing diam donec adipiscing tristique risus nec. Imperdiet proin fermentum leo vel. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Elementum integer enim neque volutpat ac tincidunt vitae semper. Nam libero justo laoreet sit. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Et sollicitudin ac orci phasellus egestas tellus. Nunc sed augue lacus viverra vitae congue eu. Dui vivamus arcu felis bibendum ut. Mattis nunc sed blandit libero volutpat sed. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Quam vulputate dignissim suspendisse in est ante in nibh. Accumsan sit amet nulla facilisi morbi. Ac ut consequat semper viverra. Viverra tellus in hac habitasse platea dictumst. Donec ultrices tincidunt arcu non sodales neque. In est ante in nibh mauris. Mattis enim ut tellus elementum sagittis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et netus. Sed id semper risus in. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Vitae tempus quam pellentesque nec nam aliquam sem et tortor. In arcu cursus euismod quis viverra nibh cras. Sit amet consectetur adipiscing elit duis tristique. Augue ut lectus arcu bibendum at varius vel pharetra vel. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Libero nunc consequat interdum varius sit amet mattis vulputate. Netus et malesuada fames ac. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Duis convallis convallis tellus id interdum velit laoreet. Et tortor consequat id porta nibh venenatis cras. Laoreet sit amet cursus sit amet dictum sit amet justo.</p>
36 </div>
37 <img src="https://png.pngtree.com/png-clipart/20190108/ourmid/pngtree-tree-green-plant-photography-png-png-image_305004.jpg" >
38 <iframe width="560" height="315" src="https://www.youtube.com/embed/gK8s4LUJ7NE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
39 <div class="black">
40 <p class="black">Lorem Ipsum</p>
41 </div>
42</body>
43</html>`;
44
45var data = $.parseHTML(siteText);
46console.log(data);
47console.log($(data).find('p').length);
48console.log($(data).find('img').length);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>$.ajax({
49 url: 'http://jsfiddle.net/2AaFk/1',
50 method: 'get'
51})
52.done((siteText) => {
53 console.log(siteText);
54 var data = $.parseHTML(siteText);
55 //console.log(data);
56 console.log($(data).find('h3').length);
57});
58
QUESTION
Positioning of the youtube video
Asked 2022-Mar-15 at 13:23So I wanted to place this youtube video like in this picture in the red rectangle but none of my ideas work, every time the video is in the weird place. Could someone help? (Adjust the size of the video window) [ adding random words because post need some more description because it's mostly code, hey how is your day going]
1body {
2 margin: 0;
3 height: 100vh;
4}
5
6.grid-container {
7 display: grid;
8 grid-template-columns: 1fr 1.4fr 1.3fr;
9 grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
10 grid-template-areas:
11 "header main main"
12 "lmain main main"
13 "lmain below below"
14 "footer footer footer";
15 height: 100vh;
16}
17
18
19main {
20 grid-area: main;
21 background: #FFFADF;
22}
23
24section.below {
25 grid-area: below;
26 background: #C4B35A;
27}
28
29
30section.footer {
31 grid-area: footer;
32 background: #615e5e;
33}
34
35header {
36 grid-area: header;
37 background: rgb(198, 250, 239);
38}
39.lmain {
40 grid-area: lmain;
41 background: rgb(233, 112, 112);
42 background-size: cover;
43}
44
45ul{
46 list-style-type: none;
47 margin: 0;
48 padding: 0;
49 overflow: hidden;
50 background-color: #486cad;
51}
52li{
53 float: left;
54}
55li a{
56 display: block;
57 color: white;
58 text-align: center;
59 padding: 16px 16px;
60 text-decoration: none;
61}
62li a:hover {
63 background-color: #95b8d1;
64}
65
66#main-text{
67 font-family:sans-serif;
68 font-weight: 550;
69 font-size: 17px;
70 text-align: center;
71}
72
73#quote{
74 font-family:sans-serif;
75 font-size: 18px;
76 text-align: center;
77}
78#author{
79 font-family:sans-serif;
80 margin-right: 10px;
81 font-size: 10px;
82 text-align: center;
83}
84.text-box hr{
85 width: 20%;
86 height: 1px;
87 background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
88 border: none;
89}
90.box{
91 margin-left: 37px;
92 justify-content: center;
93 align-items: center;
94 position: relative;
95 width: 80%;
96 background-color: white;
97 border: 1px solid rgba(59, 58, 58, 0.46);
98 border-radius: 5px;
99 box-shadow: -2px 2px 7px gray;
100}
101main h1{
102 font-family: sans-serif;
103 padding-left: 40px;
104 padding-top: 40px;
105 font-weight: 700;
106}
107main h6{
108 font-family: sans-serif;
109 padding-left: 40px;
110 font-size: 13px;
111 line-height: 20px;
112 font-weight: 600;
113}
1body {
2 margin: 0;
3 height: 100vh;
4}
5
6.grid-container {
7 display: grid;
8 grid-template-columns: 1fr 1.4fr 1.3fr;
9 grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
10 grid-template-areas:
11 "header main main"
12 "lmain main main"
13 "lmain below below"
14 "footer footer footer";
15 height: 100vh;
16}
17
18
19main {
20 grid-area: main;
21 background: #FFFADF;
22}
23
24section.below {
25 grid-area: below;
26 background: #C4B35A;
27}
28
29
30section.footer {
31 grid-area: footer;
32 background: #615e5e;
33}
34
35header {
36 grid-area: header;
37 background: rgb(198, 250, 239);
38}
39.lmain {
40 grid-area: lmain;
41 background: rgb(233, 112, 112);
42 background-size: cover;
43}
44
45ul{
46 list-style-type: none;
47 margin: 0;
48 padding: 0;
49 overflow: hidden;
50 background-color: #486cad;
51}
52li{
53 float: left;
54}
55li a{
56 display: block;
57 color: white;
58 text-align: center;
59 padding: 16px 16px;
60 text-decoration: none;
61}
62li a:hover {
63 background-color: #95b8d1;
64}
65
66#main-text{
67 font-family:sans-serif;
68 font-weight: 550;
69 font-size: 17px;
70 text-align: center;
71}
72
73#quote{
74 font-family:sans-serif;
75 font-size: 18px;
76 text-align: center;
77}
78#author{
79 font-family:sans-serif;
80 margin-right: 10px;
81 font-size: 10px;
82 text-align: center;
83}
84.text-box hr{
85 width: 20%;
86 height: 1px;
87 background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
88 border: none;
89}
90.box{
91 margin-left: 37px;
92 justify-content: center;
93 align-items: center;
94 position: relative;
95 width: 80%;
96 background-color: white;
97 border: 1px solid rgba(59, 58, 58, 0.46);
98 border-radius: 5px;
99 box-shadow: -2px 2px 7px gray;
100}
101main h1{
102 font-family: sans-serif;
103 padding-left: 40px;
104 padding-top: 40px;
105 font-weight: 700;
106}
107main h6{
108 font-family: sans-serif;
109 padding-left: 40px;
110 font-size: 13px;
111 line-height: 20px;
112 font-weight: 600;
113}<!DOCTYPE html>
114<head>
115 <meta charset="UTF-8">
116 <meta name="viewport" content="width=device-width, initial-scale=1.0">
117 <title>the title idk</title>
118 <link rel="stylesheet" href="style.css">
119</head>
120<body>
121 <div class="grid-container">
122 <header>
123
124 </header>
125 <main>
126 <div id="description">
127 <h1>Man's<br>
128 best<br>
129 friend
130 </h1>
131 <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br>
132 by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br>
133 człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br>
134 przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br>
135 Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br>
136 czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br>
137 dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br>
138 kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka!
139 </h6>
140 </div>
141 <div class="commercial">
142 <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
143 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
144 allowfullscreen></iframe>
145 </div>
146 </main>
147 <section class="below">
148
149 </section>
150
151 <section class="footer">
152 footer
153 </section>
154 <div class="lmain">
155
156 </div>
157
158
159
160 </div>
161
162</body>
163</html>
ANSWER
Answered 2022-Mar-15 at 13:13Add a float
and a width
to your description and commercial div.
Example that works in your code:
1body {
2 margin: 0;
3 height: 100vh;
4}
5
6.grid-container {
7 display: grid;
8 grid-template-columns: 1fr 1.4fr 1.3fr;
9 grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
10 grid-template-areas:
11 "header main main"
12 "lmain main main"
13 "lmain below below"
14 "footer footer footer";
15 height: 100vh;
16}
17
18
19main {
20 grid-area: main;
21 background: #FFFADF;
22}
23
24section.below {
25 grid-area: below;
26 background: #C4B35A;
27}
28
29
30section.footer {
31 grid-area: footer;
32 background: #615e5e;
33}
34
35header {
36 grid-area: header;
37 background: rgb(198, 250, 239);
38}
39.lmain {
40 grid-area: lmain;
41 background: rgb(233, 112, 112);
42 background-size: cover;
43}
44
45ul{
46 list-style-type: none;
47 margin: 0;
48 padding: 0;
49 overflow: hidden;
50 background-color: #486cad;
51}
52li{
53 float: left;
54}
55li a{
56 display: block;
57 color: white;
58 text-align: center;
59 padding: 16px 16px;
60 text-decoration: none;
61}
62li a:hover {
63 background-color: #95b8d1;
64}
65
66#main-text{
67 font-family:sans-serif;
68 font-weight: 550;
69 font-size: 17px;
70 text-align: center;
71}
72
73#quote{
74 font-family:sans-serif;
75 font-size: 18px;
76 text-align: center;
77}
78#author{
79 font-family:sans-serif;
80 margin-right: 10px;
81 font-size: 10px;
82 text-align: center;
83}
84.text-box hr{
85 width: 20%;
86 height: 1px;
87 background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
88 border: none;
89}
90.box{
91 margin-left: 37px;
92 justify-content: center;
93 align-items: center;
94 position: relative;
95 width: 80%;
96 background-color: white;
97 border: 1px solid rgba(59, 58, 58, 0.46);
98 border-radius: 5px;
99 box-shadow: -2px 2px 7px gray;
100}
101main h1{
102 font-family: sans-serif;
103 padding-left: 40px;
104 padding-top: 40px;
105 font-weight: 700;
106}
107main h6{
108 font-family: sans-serif;
109 padding-left: 40px;
110 font-size: 13px;
111 line-height: 20px;
112 font-weight: 600;
113}<!DOCTYPE html>
114<head>
115 <meta charset="UTF-8">
116 <meta name="viewport" content="width=device-width, initial-scale=1.0">
117 <title>the title idk</title>
118 <link rel="stylesheet" href="style.css">
119</head>
120<body>
121 <div class="grid-container">
122 <header>
123
124 </header>
125 <main>
126 <div id="description">
127 <h1>Man's<br>
128 best<br>
129 friend
130 </h1>
131 <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br>
132 by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br>
133 człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br>
134 przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br>
135 Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br>
136 czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br>
137 dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br>
138 kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka!
139 </h6>
140 </div>
141 <div class="commercial">
142 <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
143 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
144 allowfullscreen></iframe>
145 </div>
146 </main>
147 <section class="below">
148
149 </section>
150
151 <section class="footer">
152 footer
153 </section>
154 <div class="lmain">
155
156 </div>
157
158
159
160 </div>
161
162</body>
163</html>body {
164 margin: 0;
165 height: 100vh;
166}
167
168.grid-container {
169 display: grid;
170 grid-template-columns: 1fr 1.4fr 1.3fr;
171 grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
172 grid-template-areas:
173 "header main main"
174 "lmain main main"
175 "lmain below below"
176 "footer footer footer";
177 height: 100vh;
178}
179
180
181main {
182 grid-area: main;
183 background: #FFFADF;
184}
185
186section.below {
187 grid-area: below;
188 background: #C4B35A;
189}
190
191
192section.footer {
193 grid-area: footer;
194 background: #615e5e;
195}
196
197header {
198 grid-area: header;
199 background: rgb(198, 250, 239);
200}
201.lmain {
202 grid-area: lmain;
203 background: rgb(233, 112, 112);
204 background-size: cover;
205}
206
207ul{
208 list-style-type: none;
209 margin: 0;
210 padding: 0;
211 overflow: hidden;
212 background-color: #486cad;
213}
214li{
215 float: left;
216}
217li a{
218 display: block;
219 color: white;
220 text-align: center;
221 padding: 16px 16px;
222 text-decoration: none;
223}
224li a:hover {
225 background-color: #95b8d1;
226}
227
228#main-text{
229 font-family:sans-serif;
230 font-weight: 550;
231 font-size: 17px;
232 text-align: center;
233}
234
235#quote{
236 font-family:sans-serif;
237 font-size: 18px;
238 text-align: center;
239}
240#author{
241 font-family:sans-serif;
242 margin-right: 10px;
243 font-size: 10px;
244 text-align: center;
245}
246.text-box hr{
247 width: 20%;
248 height: 1px;
249 background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
250 border: none;
251}
252.box{
253 margin-left: 37px;
254 justify-content: center;
255 align-items: center;
256 position: relative;
257 width: 80%;
258 background-color: white;
259 border: 1px solid rgba(59, 58, 58, 0.46);
260 border-radius: 5px;
261 box-shadow: -2px 2px 7px gray;
262}
263main h1{
264 font-family: sans-serif;
265 padding-left: 40px;
266 padding-top: 40px;
267 font-weight: 700;
268}
269main h6{
270 font-family: sans-serif;
271 padding-left: 40px;
272 font-size: 13px;
273 line-height: 20px;
274 font-weight: 600;
275}
276
277#description {
278 float: left;
279 width: 50%;
280}
281
282.commercial {
283 float: right;
284 width: 50%;
285}
1body {
2 margin: 0;
3 height: 100vh;
4}
5
6.grid-container {
7 display: grid;
8 grid-template-columns: 1fr 1.4fr 1.3fr;
9 grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
10 grid-template-areas:
11 "header main main"
12 "lmain main main"
13 "lmain below below"
14 "footer footer footer";
15 height: 100vh;
16}
17
18
19main {
20 grid-area: main;
21 background: #FFFADF;
22}
23
24section.below {
25 grid-area: below;
26 background: #C4B35A;
27}
28
29
30section.footer {
31 grid-area: footer;
32 background: #615e5e;
33}
34
35header {
36 grid-area: header;
37 background: rgb(198, 250, 239);
38}
39.lmain {
40 grid-area: lmain;
41 background: rgb(233, 112, 112);
42 background-size: cover;
43}
44
45ul{
46 list-style-type: none;
47 margin: 0;
48 padding: 0;
49 overflow: hidden;
50 background-color: #486cad;
51}
52li{
53 float: left;
54}
55li a{
56 display: block;
57 color: white;
58 text-align: center;
59 padding: 16px 16px;
60 text-decoration: none;
61}
62li a:hover {
63 background-color: #95b8d1;
64}
65
66#main-text{
67 font-family:sans-serif;
68 font-weight: 550;
69 font-size: 17px;
70 text-align: center;
71}
72
73#quote{
74 font-family:sans-serif;
75 font-size: 18px;
76 text-align: center;
77}
78#author{
79 font-family:sans-serif;
80 margin-right: 10px;
81 font-size: 10px;
82 text-align: center;
83}
84.text-box hr{
85 width: 20%;
86 height: 1px;
87 background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
88 border: none;
89}
90.box{
91 margin-left: 37px;
92 justify-content: center;
93 align-items: center;
94 position: relative;
95 width: 80%;
96 background-color: white;
97 border: 1px solid rgba(59, 58, 58, 0.46);
98 border-radius: 5px;
99 box-shadow: -2px 2px 7px gray;
100}
101main h1{
102 font-family: sans-serif;
103 padding-left: 40px;
104 padding-top: 40px;
105 font-weight: 700;
106}
107main h6{
108 font-family: sans-serif;
109 padding-left: 40px;
110 font-size: 13px;
111 line-height: 20px;
112 font-weight: 600;
113}<!DOCTYPE html>
114<head>
115 <meta charset="UTF-8">
116 <meta name="viewport" content="width=device-width, initial-scale=1.0">
117 <title>the title idk</title>
118 <link rel="stylesheet" href="style.css">
119</head>
120<body>
121 <div class="grid-container">
122 <header>
123
124 </header>
125 <main>
126 <div id="description">
127 <h1>Man's<br>
128 best<br>
129 friend
130 </h1>
131 <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br>
132 by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br>
133 człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br>
134 przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br>
135 Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br>
136 czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br>
137 dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br>
138 kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka!
139 </h6>
140 </div>
141 <div class="commercial">
142 <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
143 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
144 allowfullscreen></iframe>
145 </div>
146 </main>
147 <section class="below">
148
149 </section>
150
151 <section class="footer">
152 footer
153 </section>
154 <div class="lmain">
155
156 </div>
157
158
159
160 </div>
161
162</body>
163</html>body {
164 margin: 0;
165 height: 100vh;
166}
167
168.grid-container {
169 display: grid;
170 grid-template-columns: 1fr 1.4fr 1.3fr;
171 grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
172 grid-template-areas:
173 "header main main"
174 "lmain main main"
175 "lmain below below"
176 "footer footer footer";
177 height: 100vh;
178}
179
180
181main {
182 grid-area: main;
183 background: #FFFADF;
184}
185
186section.below {
187 grid-area: below;
188 background: #C4B35A;
189}
190
191
192section.footer {
193 grid-area: footer;
194 background: #615e5e;
195}
196
197header {
198 grid-area: header;
199 background: rgb(198, 250, 239);
200}
201.lmain {
202 grid-area: lmain;
203 background: rgb(233, 112, 112);
204 background-size: cover;
205}
206
207ul{
208 list-style-type: none;
209 margin: 0;
210 padding: 0;
211 overflow: hidden;
212 background-color: #486cad;
213}
214li{
215 float: left;
216}
217li a{
218 display: block;
219 color: white;
220 text-align: center;
221 padding: 16px 16px;
222 text-decoration: none;
223}
224li a:hover {
225 background-color: #95b8d1;
226}
227
228#main-text{
229 font-family:sans-serif;
230 font-weight: 550;
231 font-size: 17px;
232 text-align: center;
233}
234
235#quote{
236 font-family:sans-serif;
237 font-size: 18px;
238 text-align: center;
239}
240#author{
241 font-family:sans-serif;
242 margin-right: 10px;
243 font-size: 10px;
244 text-align: center;
245}
246.text-box hr{
247 width: 20%;
248 height: 1px;
249 background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
250 border: none;
251}
252.box{
253 margin-left: 37px;
254 justify-content: center;
255 align-items: center;
256 position: relative;
257 width: 80%;
258 background-color: white;
259 border: 1px solid rgba(59, 58, 58, 0.46);
260 border-radius: 5px;
261 box-shadow: -2px 2px 7px gray;
262}
263main h1{
264 font-family: sans-serif;
265 padding-left: 40px;
266 padding-top: 40px;
267 font-weight: 700;
268}
269main h6{
270 font-family: sans-serif;
271 padding-left: 40px;
272 font-size: 13px;
273 line-height: 20px;
274 font-weight: 600;
275}
276
277#description {
278 float: left;
279 width: 50%;
280}
281
282.commercial {
283 float: right;
284 width: 50%;
285}<!DOCTYPE html>
286<head>
287 <meta charset="UTF-8">
288 <meta name="viewport" content="width=device-width, initial-scale=1.0">
289 <title>the title idk</title>
290 <link rel="stylesheet" href="style.css">
291</head>
292<body>
293 <div class="grid-container">
294 <header>
295
296 </header>
297 <main>
298 <div id="description">
299 <h1>Man's<br>
300 best<br>
301 friend
302 </h1>
303 <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br>
304 by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br>
305 człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br>
306 przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br>
307 Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br>
308 czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br>
309 dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br>
310 kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka!
311 </h6>
312 </div>
313 <div class="commercial">
314 <br><br><br>
315 <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
316 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
317 allowfullscreen></iframe>
318 </div>
319 </main>
320 <section class="below">
321
322 </section>
323
324 <section class="footer">
325 footer
326 </section>
327 <div class="lmain">
328
329 </div>
330
331
332
333 </div>
334
335</body>
336</html>
QUESTION
PyQt5: How to detect if QSlider is dragged to the end
Asked 2022-Mar-07 at 02:51I want to detect if a user drags a QSlider handle all the way to the end.
I created a video player that displays the video frames in a QLabel object. A horizontal QSlider object tracks the video position and can also be dragged to position the video. I want the video player to do one thing if the video plays all the way to the end and do something else if the user drags the slider all the way to the end.
I tried detecting if the mouse button is pressed when the slider reaches the end, but have not been able to get that to work in the script below. Is there some other way to determine if the end of the slider is reached when the user drags the slider (mouse button pressed) versus when the video plays to the end by itself (mouse button not pressed)?
1from PyQt5 import QtCore, QtWidgets
2import sys
3
4class MainWindow(QtWidgets.QMainWindow):
5 def __init__(self, parent=None):
6 super().__init__(parent)
7
8 central_widget = QtWidgets.QWidget()
9 self.setCentralWidget(central_widget)
10
11 self.label = QtWidgets.QLabel()
12 self.label.setStyleSheet("border: 1px solid black")
13
14 self.slider = QtWidgets.QSlider()
15 self.slider.setOrientation(QtCore.Qt.Horizontal)
16
17 lay = QtWidgets.QVBoxLayout(central_widget)
18 #lay.addWidget(self.label)
19 lay.addWidget(self.slider)
20
21 self.resize(640, 480)
22
23 def mousePressEvent(self, event):
24 super().mousePressEvent(event)
25 self.label.setText('Pressed')
26
27 def mouseReleaseEvent(self, event):
28 super().mouseReleaseEvent(event)
29 self.label.setText('Released')
30
31 def sliderPressed(self, event):
32 super().sliderPressed(event)
33 self.label.setText('Pressed')
34
35 def sliderReleased(self, event):
36 super().sliderReleased(event)
37 self.label.setText('Released')
38
39if __name__ == "__main__":
40 app = QtWidgets.QApplication(sys.argv)
41 w = MainWindow()
42 w.show()
43 sys.exit(app.exec_())
44
ANSWER
Answered 2022-Mar-07 at 02:51The QSlider
class inherits QAbstractSlider, which has some signals and functions that make this relatively easy to achieve. In particular, the actionTriggered signal provides fine-grained slider movement notifications, which are independent of any programmatic value changes (i.e. via setValue
). This allows tracking all mouse and keyboard changes (via dragging, wheel-scrolling, arrow/page keys, etc) before the value itself changes, which pretty much gives total control. There's also the sliderDown property, which can be used to identify the specific case where the mouse is pressed when dragging.
Below is a simple demo based on your example:
1from PyQt5 import QtCore, QtWidgets
2import sys
3
4class MainWindow(QtWidgets.QMainWindow):
5 def __init__(self, parent=None):
6 super().__init__(parent)
7
8 central_widget = QtWidgets.QWidget()
9 self.setCentralWidget(central_widget)
10
11 self.label = QtWidgets.QLabel()
12 self.label.setStyleSheet("border: 1px solid black")
13
14 self.slider = QtWidgets.QSlider()
15 self.slider.setOrientation(QtCore.Qt.Horizontal)
16
17 lay = QtWidgets.QVBoxLayout(central_widget)
18 #lay.addWidget(self.label)
19 lay.addWidget(self.slider)
20
21 self.resize(640, 480)
22
23 def mousePressEvent(self, event):
24 super().mousePressEvent(event)
25 self.label.setText('Pressed')
26
27 def mouseReleaseEvent(self, event):
28 super().mouseReleaseEvent(event)
29 self.label.setText('Released')
30
31 def sliderPressed(self, event):
32 super().sliderPressed(event)
33 self.label.setText('Pressed')
34
35 def sliderReleased(self, event):
36 super().sliderReleased(event)
37 self.label.setText('Released')
38
39if __name__ == "__main__":
40 app = QtWidgets.QApplication(sys.argv)
41 w = MainWindow()
42 w.show()
43 sys.exit(app.exec_())
44from PyQt5 import QtCore, QtWidgets
45import sys
46
47class MainWindow(QtWidgets.QMainWindow):
48 def __init__(self, parent=None):
49 super().__init__(parent)
50 central_widget = QtWidgets.QWidget()
51 self.setCentralWidget(central_widget)
52 self.label = QtWidgets.QLabel()
53 self.label.setStyleSheet("border: 1px solid black")
54 self.slider = QtWidgets.QSlider()
55 self.slider.setOrientation(QtCore.Qt.Horizontal)
56 self.slider.setRange(0, 10000)
57 self.slider.setSingleStep(50)
58 self.slider.setPageStep(500)
59 self.slider.actionTriggered.connect(self.handleSliderAction)
60 self.button = QtWidgets.QPushButton('Play')
61 self.button.clicked.connect(self.handlePlay)
62 lay = QtWidgets.QVBoxLayout(central_widget)
63 lay.addWidget(self.label)
64 lay.addWidget(self.slider)
65 lay.addWidget(self.button)
66 self.resize(640, 480)
67 self.timer = QtCore.QTimer()
68 self.timer.setInterval(10)
69 self.timer.timeout.connect(
70 lambda: self.slider.setValue(self.slider.value() + 1))
71
72 def handleSliderAction(self, action):
73 value = self.slider.sliderPosition()
74 if value == self.slider.maximum():
75 if self.slider.isSliderDown():
76 self.label.setText('slider: end (down)')
77 else:
78 self.label.setText('slider: end')
79 else:
80 self.label.setText(f'slider: {value}')
81
82 def handlePlay(self):
83 if self.timer.isActive():
84 self.timer.stop()
85 self.button.setText('Play')
86 else:
87 self.button.setText('Pause')
88 self.timer.start()
89
90if __name__ == "__main__":
91
92 app = QtWidgets.QApplication(sys.argv)
93 w = MainWindow()
94 w.show()
95 sys.exit(app.exec_())
96
QUESTION
Typo3 CKeditor <iframe> YouTube video issue
Asked 2022-Mar-01 at 14:50I tried to add an YouTube video in my text/image content with the iframe link from YouTube, or by clicking in "Embed Youtube video" and adding the embed code but it doesn't work, in frond en I see an Iframe balise like :
<--iframe width="560" height="315" src="https://www.youtube.com/embed/dqsdsdq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
In Ckeditor I see a black square of YouTube written : video not available
I checked my config but I don't see what is wrong, I show you some code of my config :
Default.yaml
1editor:
2 config:
3 allowedContent: true
4 removeFormatAttributes: ""
5 youtube_width: 550
6 extraAllowedContent: '*(*)[data-*]; iframe'
7
8
9 externalPlugins:
10 youtube: {resource: "EXT:skin/Resources/Public/vendor/scripts/youtube/youtube/plugin.js"}
11
12 extraAllowedContent:
13 - span
14 - iframe
15 allowTags:
16 - iframe
17 processing:
18 allowTags:
19 - iframe
20 allowTagsOutside:
21 - iframe
22
Page.ts :
1editor:
2 config:
3 allowedContent: true
4 removeFormatAttributes: ""
5 youtube_width: 550
6 extraAllowedContent: '*(*)[data-*]; iframe'
7
8
9 externalPlugins:
10 youtube: {resource: "EXT:skin/Resources/Public/vendor/scripts/youtube/youtube/plugin.js"}
11
12 extraAllowedContent:
13 - span
14 - iframe
15 allowTags:
16 - iframe
17 processing:
18 allowTags:
19 - iframe
20 allowTagsOutside:
21 - iframe
22RTE.default {
23 proc {
24 blockElementList := addToList(iframe)
25 externalBlocks := addToList(iframe)
26 }
27}
28
PageTemplate.ts
1editor:
2 config:
3 allowedContent: true
4 removeFormatAttributes: ""
5 youtube_width: 550
6 extraAllowedContent: '*(*)[data-*]; iframe'
7
8
9 externalPlugins:
10 youtube: {resource: "EXT:skin/Resources/Public/vendor/scripts/youtube/youtube/plugin.js"}
11
12 extraAllowedContent:
13 - span
14 - iframe
15 allowTags:
16 - iframe
17 processing:
18 allowTags:
19 - iframe
20 allowTagsOutside:
21 - iframe
22RTE.default {
23 proc {
24 blockElementList := addToList(iframe)
25 externalBlocks := addToList(iframe)
26 }
27}
28lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)
29lib.parseFunc.htmlSanitize = 0
30lib.parseFunc_RTE.htmlSanitize = 0
31
Someone can tell we what's wrong with my config ? I'm using TYPO3 9.5
thanks you
update : It's working now, I added the 2 last line in my PageTemplate.ts , I edited my code to show my fix
ANSWER
Answered 2022-Feb-26 at 23:33You can try:
1editor:
2 config:
3 allowedContent: true
4 removeFormatAttributes: ""
5 youtube_width: 550
6 extraAllowedContent: '*(*)[data-*]; iframe'
7
8
9 externalPlugins:
10 youtube: {resource: "EXT:skin/Resources/Public/vendor/scripts/youtube/youtube/plugin.js"}
11
12 extraAllowedContent:
13 - span
14 - iframe
15 allowTags:
16 - iframe
17 processing:
18 allowTags:
19 - iframe
20 allowTagsOutside:
21 - iframe
22RTE.default {
23 proc {
24 blockElementList := addToList(iframe)
25 externalBlocks := addToList(iframe)
26 }
27}
28lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)
29lib.parseFunc.htmlSanitize = 0
30lib.parseFunc_RTE.htmlSanitize = 0
31editor:
32 externalPlugins:
33 youtube: {resource: "EXT:image_displayer/Resources/Public/youtube/plugin.js"}
34 typo3image:
35 allowedExtensions: "jpg,jpeg,png"
36
37 config:
38 allowTags:
39 - pre
40 - code
41 - iframe
42 allowedContent: true
43 removePlugins: null
44
45processing:
46 allowTags:
47 - pre
48 - code
49 - iframe
50 allowedContent: true
51 removeFormatAttributes: ""
52 youtube_width: 550
53
It can be possible you need a youtube plugin also
get plugin: https://ckeditor.com/cke4/addon/youtube
Put the plugin in custom_ext/Resources/Public/CKEditor/Plugins/youtube/ folder
Also:
Paste the embed code in the source view of the editor, maybe instead of using the youtube button.
This line is also needed:
1editor:
2 config:
3 allowedContent: true
4 removeFormatAttributes: ""
5 youtube_width: 550
6 extraAllowedContent: '*(*)[data-*]; iframe'
7
8
9 externalPlugins:
10 youtube: {resource: "EXT:skin/Resources/Public/vendor/scripts/youtube/youtube/plugin.js"}
11
12 extraAllowedContent:
13 - span
14 - iframe
15 allowTags:
16 - iframe
17 processing:
18 allowTags:
19 - iframe
20 allowTagsOutside:
21 - iframe
22RTE.default {
23 proc {
24 blockElementList := addToList(iframe)
25 externalBlocks := addToList(iframe)
26 }
27}
28lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)
29lib.parseFunc.htmlSanitize = 0
30lib.parseFunc_RTE.htmlSanitize = 0
31editor:
32 externalPlugins:
33 youtube: {resource: "EXT:image_displayer/Resources/Public/youtube/plugin.js"}
34 typo3image:
35 allowedExtensions: "jpg,jpeg,png"
36
37 config:
38 allowTags:
39 - pre
40 - code
41 - iframe
42 allowedContent: true
43 removePlugins: null
44
45processing:
46 allowTags:
47 - pre
48 - code
49 - iframe
50 allowedContent: true
51 removeFormatAttributes: ""
52 youtube_width: 550
53lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)
54
QUESTION
How do i open srt file on flutter?
Asked 2022-Feb-24 at 09:49I am trying to load subtitle to a video using the flutter video player package it works good for short files but it stopped as the file get bigger I trayed subtitle_wrapper package but it has many bugs
1Future<ClosedCaptionFile> getSubtitle(String url) async {
2 final data = NetworkAssetBundle(Uri(path: url));
3 final newdata = await data.load(url);
4 String fileContents = getStringFromBytes(newdata);
5 return captionFile = SubRipCaptionFile(fileContents);
6}
7
this is getStringFromBytes function
1Future<ClosedCaptionFile> getSubtitle(String url) async {
2 final data = NetworkAssetBundle(Uri(path: url));
3 final newdata = await data.load(url);
4 String fileContents = getStringFromBytes(newdata);
5 return captionFile = SubRipCaptionFile(fileContents);
6}
7getStringFromBytes(ByteData data) { final buffer = data.buffer;
8var list = buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
9return utf8.decode(list); }
10
ANSWER
Answered 2022-Feb-24 at 09:49it wasn't the size after all I tested on some srt files that have a blank space for some duration and the flutter converter do a check on every element if the length is<3 it break on get out of the loop
QUESTION
Make total video duration instantly known in video player (ffmpeg / html)
Asked 2022-Feb-19 at 15:34What's the correct ffmpeg setting to prevent the video from 'lazy' loading the video's total duration?
ProblemI'm trying to transcode a video using ffmpeg (in NodeJS). When transcoding is finished ffmpeg uploads the video automatically to a bucket (GCP).
Hoverever, the video that ffmpeg produces doesn't have a clear total duration when played in a HTML video player. It's only after x (milli)seconds that the total video duration is known and displayed.
CodeUsing the fluent-ffmpeg NodeJS library:
1const settings: VideoHDPresetSettings = {
2 format: "mp4",
3 codec: "libx264",
4 size: "1920x1080",
5 ratio: "16:9",
6 options: [
7 "-movflags", "frag_keyframe+empty_moov+faststart",
8 "-preset", "veryfast",
9 "-crf", "16",
10 ],
11};
12
13ffmpeg({source: "input.mp4"})
14 .format(settings.format)
15 .videoCodec(settings.codec)
16 .size(settings.size)
17 .aspectRatio(settings.ratio)
18 .outputOptions(settings.options)
19 .writeToStream(outputStream);
20
This is fluent-ffmpeg's generated command:
1const settings: VideoHDPresetSettings = {
2 format: "mp4",
3 codec: "libx264",
4 size: "1920x1080",
5 ratio: "16:9",
6 options: [
7 "-movflags", "frag_keyframe+empty_moov+faststart",
8 "-preset", "veryfast",
9 "-crf", "16",
10 ],
11};
12
13ffmpeg({source: "input.mp4"})
14 .format(settings.format)
15 .videoCodec(settings.codec)
16 .size(settings.size)
17 .aspectRatio(settings.ratio)
18 .outputOptions(settings.options)
19 .writeToStream(outputStream);
20ffmpeg -i input.mp4 -vcodec libx264 -filter:v scale=w=1920:h=1080 -f mp4 -movflags frag_keyframe+empty_moov+faststart -preset veryfast -crf 16 pipe:1
21
This is what I'd like it to be, when the video is loaded the total video duration is known immediatly.
https://storage.googleapis.com/uhasselt/problem/original (expired)
Ffmpeg:This is what the code above generates, when the video is loaded the total video duration is known yet. It's pretty difficult to detect with this video, so refresh a couple of times while looking at the video's total duration on the timeline.
https://storage.googleapis.com/uhasselt/problem/ffmpeg-result (expired)
QuestionWhat's the correct ffmpeg setting to prevent the video from 'lazy' loading the video's total duration? What am I doing wrong?
ANSWER
Answered 2022-Feb-19 at 15:32After some additional testing I found out that the .writeToStream(...)
is causing this behavior. This saving technique is used to directly stream the result to some url without having to save it on the machine's local disk.
I'm now using the .save("./output/path.mp4")
function to save ffmpeg's result on disk first, afterwards I stream it to my bucket (not included in code below).
I'm not sure why this works... I think it has something to do with ffmpeg now being able to jump back and change previous saved metadata, before delivering the final video (something that wasn't possible with the .writeToStream(...)
since the data stream is one continuous stream of data without the ability to jump back).
If you're using the CLI ffmpeg version instead of fluent-ffmpeg this change would correspond to not using the pipe:1
at the end of your ffmpeg command.
This is the final solution
1const settings: VideoHDPresetSettings = {
2 format: "mp4",
3 codec: "libx264",
4 size: "1920x1080",
5 ratio: "16:9",
6 options: [
7 "-movflags", "frag_keyframe+empty_moov+faststart",
8 "-preset", "veryfast",
9 "-crf", "16",
10 ],
11};
12
13ffmpeg({source: "input.mp4"})
14 .format(settings.format)
15 .videoCodec(settings.codec)
16 .size(settings.size)
17 .aspectRatio(settings.ratio)
18 .outputOptions(settings.options)
19 .writeToStream(outputStream);
20ffmpeg -i input.mp4 -vcodec libx264 -filter:v scale=w=1920:h=1080 -f mp4 -movflags frag_keyframe+empty_moov+faststart -preset veryfast -crf 16 pipe:1
21// Exactly the same
22const settings: VideoHDPresetSettings = {
23 format: "mp4",
24 codec: "libvpx-vp9",
25 size: "1920x1080",
26 ratio: "16:9",
27 options: [
28 "-movflags", "frag_keyframe+empty_moov+faststart",
29 "-preset", "veryfast",
30 "-crf", "30",
31 ],
32};
33
34ffmpeg({source: "input.mp4"})
35 .format(settings.format)
36 .videoCodec(settings.codec)
37 .size(settings.size)
38 .aspectRatio(settings.ratio)
39 .outputOptions(settings.options)
40 .save("./output.mp4"); // NEW!
41
QUESTION
use vlcj-javafx-demo develop a player, but it looks some components UI not update correctly when set full screen
Asked 2022-Feb-19 at 01:20I try to use vlcj-javafx-demo to develop a video player, and I put the progress bar(Slider) on the StackPane over the video layer. In the beginning, it looks work well, but when I set maximum or full screen the app, it looks some components UI did not update correctly. How can I correct it?
Thanks a lot!
normally: [1]: https://i.stack.imgur.com/bbE51.png
normally: [2]: https://i.stack.imgur.com/Plsb1.png the red color is the sence background color.
the code :
1package my.javafx.myplayer;
2
3import javafx.animation.FadeTransition;
4import javafx.application.Application;
5import javafx.application.Platform;
6import javafx.beans.property.DoubleProperty;
7import javafx.geometry.Pos;
8import javafx.scene.Scene;
9import javafx.scene.control.Button;
10import javafx.scene.control.Label;
11import javafx.scene.control.ProgressIndicator;
12import javafx.scene.control.Slider;
13import javafx.scene.image.ImageView;
14import javafx.scene.layout.AnchorPane;
15import javafx.scene.layout.BorderPane;
16import javafx.scene.layout.FlowPane;
17import javafx.scene.layout.StackPane;
18import javafx.scene.paint.Color;
19import javafx.stage.Stage;
20import javafx.util.Duration;
21import uk.co.caprica.vlcj.factory.MediaPlayerFactory;
22import uk.co.caprica.vlcj.player.base.MediaPlayer;
23import uk.co.caprica.vlcj.player.base.MediaPlayerEventAdapter;
24import uk.co.caprica.vlcj.player.embedded.EmbeddedMediaPlayer;
25
26import java.util.ArrayList;
27import java.util.List;
28
29import static uk.co.caprica.vlcj.javafx.videosurface.ImageViewVideoSurfaceFactory.videoSurfaceForImageView;
30
31/**
32 *
33 */
34public class VlcjJavaFxApplication extends Application {
35
36 private final MediaPlayerFactory mediaPlayerFactory;
37
38 private final EmbeddedMediaPlayer embeddedMediaPlayer;
39
40 private ImageView videoImageView;
41
42 Slider progress=new Slider();
43
44 public VlcjJavaFxApplication() {
45 this.mediaPlayerFactory = new MediaPlayerFactory();
46 this.embeddedMediaPlayer = mediaPlayerFactory.mediaPlayers().newEmbeddedMediaPlayer();
47 this.embeddedMediaPlayer.events().addMediaPlayerEventListener(new MediaPlayerEventAdapter() {
48 @Override
49 public void mediaPlayerReady(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
50 Platform.runLater(()->{
51 progress.setValue(0);
52 progress.setMax(embeddedMediaPlayer.media().info().duration());
53
54 progress.setMin(0);
55 });
56 }
57 @Override
58 public void playing(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
59
60 }
61
62 @Override
63 public void paused(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
64 }
65
66 @Override
67 public void stopped(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
68 }
69
70 @Override
71 public void timeChanged(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer, long newTime) {
72 Platform.runLater(()->{
73 progress.setValue(newTime);
74 });
75
76 }
77 });
78 }
79
80 @Override
81 public void init() {
82 this.videoImageView = new ImageView();
83 this.videoImageView.setPreserveRatio(true);
84
85 embeddedMediaPlayer.videoSurface().set(videoSurfaceForImageView(this.videoImageView));
86 }
87
88 @Override
89 public final void start(Stage primaryStage) throws Exception {
90 List<String> params = new ArrayList<String>();
91 params.add("/Users/baixq/Downloads/妙味课堂xhtml+css2/妙味课堂-XHTMLCSS2整站视频教程-4.avi");
92 if (params.size() != 1) {
93 System.out.println("Specify a single MRL");
94 System.exit(-1);
95 }
96 StackPane root=new StackPane();
97 //BorderPane root = new BorderPane();
98 root.setStyle("-fx-background-color: black;");
99
100 videoImageView.fitWidthProperty().bind(root.widthProperty());
101 videoImageView.fitHeightProperty().bind(root.heightProperty());
102
103 root.widthProperty().addListener((observableValue, oldValue, newValue) -> {
104 // If you need to know about resizes
105 });
106
107 root.heightProperty().addListener((observableValue, oldValue, newValue) -> {
108 // If you need to know about resizes
109 });
110
111
112
113 Scene scene = new Scene(root, 1200, 675, Color.RED);
114 primaryStage.setTitle("vlcj JavaFX");
115 primaryStage.setScene(scene);
116
117 AnchorPane contrlBox=new AnchorPane();//操作面板上的控制模块
118 contrlBox.prefWidthProperty().bind(root.widthProperty());
119 contrlBox.prefHeightProperty().bind(root.heightProperty().multiply(0.1));
120
121 BorderPane controlBar=new BorderPane();
122 controlBar.setStyle("-fx-background-color: #130c0e;");
123 controlBar.prefWidthProperty().bind(root.widthProperty());
124 controlBar.prefHeightProperty().bind(root.heightProperty().multiply(0.1));
125 controlBar.setCenter(progress);
126 Button fullScreen=new Button("全屏");
127 controlBar.setRight(fullScreen);
128
129 contrlBox.getChildren().add(controlBar);
130 contrlBox.setBottomAnchor(controlBar, 0.0);
131
132
133 root.getChildren().addAll(videoImageView,contrlBox);
134
135
136 primaryStage.show();
137 embeddedMediaPlayer.media().play(params.get(0));
138
139 fullScreen.setOnAction(event->{
140 primaryStage.setFullScreen(true);
141 });
142
143 root.setOnMouseEntered(event->{
144 Platform.runLater(()->{
145 FadeTransition ft = new FadeTransition(Duration.millis(500), contrlBox);
146 ft.setFromValue(0.0);
147 ft.setToValue(1);
148 //ft.setCycleCount(Timeline.INDEFINITE);
149 ft.setAutoReverse(false);
150
151
152 ft.play();
153 contrlBox.setVisible(true);
154 });
155
156
157
158 });
159
160 root.setOnMouseExited(event->{
161 Platform.runLater(()->{
162 FadeTransition ft = new FadeTransition(Duration.millis(500), contrlBox);
163 ft.setFromValue(1);
164 ft.setToValue(0.0);
165 ft.setAutoReverse(false);
166
167
168
169 ft.play();
170 contrlBox.setVisible(false);
171 });
172 });
173
174 //embeddedMediaPlayer.controls().setPosition(0.4f);
175 }
176
177 @Override
178 public final void stop() {
179 embeddedMediaPlayer.controls().stop();
180 embeddedMediaPlayer.release();
181 mediaPlayerFactory.release();
182 }
183
184 public static void main(String[] args) {
185 launch(args);
186 }
187}
ANSWER
Answered 2022-Feb-17 at 06:18You appear to be using a Linux OS, try passing one or more of these system properties when you start your JVM:
1package my.javafx.myplayer;
2
3import javafx.animation.FadeTransition;
4import javafx.application.Application;
5import javafx.application.Platform;
6import javafx.beans.property.DoubleProperty;
7import javafx.geometry.Pos;
8import javafx.scene.Scene;
9import javafx.scene.control.Button;
10import javafx.scene.control.Label;
11import javafx.scene.control.ProgressIndicator;
12import javafx.scene.control.Slider;
13import javafx.scene.image.ImageView;
14import javafx.scene.layout.AnchorPane;
15import javafx.scene.layout.BorderPane;
16import javafx.scene.layout.FlowPane;
17import javafx.scene.layout.StackPane;
18import javafx.scene.paint.Color;
19import javafx.stage.Stage;
20import javafx.util.Duration;
21import uk.co.caprica.vlcj.factory.MediaPlayerFactory;
22import uk.co.caprica.vlcj.player.base.MediaPlayer;
23import uk.co.caprica.vlcj.player.base.MediaPlayerEventAdapter;
24import uk.co.caprica.vlcj.player.embedded.EmbeddedMediaPlayer;
25
26import java.util.ArrayList;
27import java.util.List;
28
29import static uk.co.caprica.vlcj.javafx.videosurface.ImageViewVideoSurfaceFactory.videoSurfaceForImageView;
30
31/**
32 *
33 */
34public class VlcjJavaFxApplication extends Application {
35
36 private final MediaPlayerFactory mediaPlayerFactory;
37
38 private final EmbeddedMediaPlayer embeddedMediaPlayer;
39
40 private ImageView videoImageView;
41
42 Slider progress=new Slider();
43
44 public VlcjJavaFxApplication() {
45 this.mediaPlayerFactory = new MediaPlayerFactory();
46 this.embeddedMediaPlayer = mediaPlayerFactory.mediaPlayers().newEmbeddedMediaPlayer();
47 this.embeddedMediaPlayer.events().addMediaPlayerEventListener(new MediaPlayerEventAdapter() {
48 @Override
49 public void mediaPlayerReady(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
50 Platform.runLater(()->{
51 progress.setValue(0);
52 progress.setMax(embeddedMediaPlayer.media().info().duration());
53
54 progress.setMin(0);
55 });
56 }
57 @Override
58 public void playing(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
59
60 }
61
62 @Override
63 public void paused(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
64 }
65
66 @Override
67 public void stopped(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
68 }
69
70 @Override
71 public void timeChanged(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer, long newTime) {
72 Platform.runLater(()->{
73 progress.setValue(newTime);
74 });
75
76 }
77 });
78 }
79
80 @Override
81 public void init() {
82 this.videoImageView = new ImageView();
83 this.videoImageView.setPreserveRatio(true);
84
85 embeddedMediaPlayer.videoSurface().set(videoSurfaceForImageView(this.videoImageView));
86 }
87
88 @Override
89 public final void start(Stage primaryStage) throws Exception {
90 List<String> params = new ArrayList<String>();
91 params.add("/Users/baixq/Downloads/妙味课堂xhtml+css2/妙味课堂-XHTMLCSS2整站视频教程-4.avi");
92 if (params.size() != 1) {
93 System.out.println("Specify a single MRL");
94 System.exit(-1);
95 }
96 StackPane root=new StackPane();
97 //BorderPane root = new BorderPane();
98 root.setStyle("-fx-background-color: black;");
99
100 videoImageView.fitWidthProperty().bind(root.widthProperty());
101 videoImageView.fitHeightProperty().bind(root.heightProperty());
102
103 root.widthProperty().addListener((observableValue, oldValue, newValue) -> {
104 // If you need to know about resizes
105 });
106
107 root.heightProperty().addListener((observableValue, oldValue, newValue) -> {
108 // If you need to know about resizes
109 });
110
111
112
113 Scene scene = new Scene(root, 1200, 675, Color.RED);
114 primaryStage.setTitle("vlcj JavaFX");
115 primaryStage.setScene(scene);
116
117 AnchorPane contrlBox=new AnchorPane();//操作面板上的控制模块
118 contrlBox.prefWidthProperty().bind(root.widthProperty());
119 contrlBox.prefHeightProperty().bind(root.heightProperty().multiply(0.1));
120
121 BorderPane controlBar=new BorderPane();
122 controlBar.setStyle("-fx-background-color: #130c0e;");
123 controlBar.prefWidthProperty().bind(root.widthProperty());
124 controlBar.prefHeightProperty().bind(root.heightProperty().multiply(0.1));
125 controlBar.setCenter(progress);
126 Button fullScreen=new Button("全屏");
127 controlBar.setRight(fullScreen);
128
129 contrlBox.getChildren().add(controlBar);
130 contrlBox.setBottomAnchor(controlBar, 0.0);
131
132
133 root.getChildren().addAll(videoImageView,contrlBox);
134
135
136 primaryStage.show();
137 embeddedMediaPlayer.media().play(params.get(0));
138
139 fullScreen.setOnAction(event->{
140 primaryStage.setFullScreen(true);
141 });
142
143 root.setOnMouseEntered(event->{
144 Platform.runLater(()->{
145 FadeTransition ft = new FadeTransition(Duration.millis(500), contrlBox);
146 ft.setFromValue(0.0);
147 ft.setToValue(1);
148 //ft.setCycleCount(Timeline.INDEFINITE);
149 ft.setAutoReverse(false);
150
151
152 ft.play();
153 contrlBox.setVisible(true);
154 });
155
156
157
158 });
159
160 root.setOnMouseExited(event->{
161 Platform.runLater(()->{
162 FadeTransition ft = new FadeTransition(Duration.millis(500), contrlBox);
163 ft.setFromValue(1);
164 ft.setToValue(0.0);
165 ft.setAutoReverse(false);
166
167
168
169 ft.play();
170 contrlBox.setVisible(false);
171 });
172 });
173
174 //embeddedMediaPlayer.controls().setPosition(0.4f);
175 }
176
177 @Override
178 public final void stop() {
179 embeddedMediaPlayer.controls().stop();
180 embeddedMediaPlayer.release();
181 mediaPlayerFactory.release();
182 }
183
184 public static void main(String[] args) {
185 launch(args);
186 }
187}-Dprism.dirtyopts=false
188
1package my.javafx.myplayer;
2
3import javafx.animation.FadeTransition;
4import javafx.application.Application;
5import javafx.application.Platform;
6import javafx.beans.property.DoubleProperty;
7import javafx.geometry.Pos;
8import javafx.scene.Scene;
9import javafx.scene.control.Button;
10import javafx.scene.control.Label;
11import javafx.scene.control.ProgressIndicator;
12import javafx.scene.control.Slider;
13import javafx.scene.image.ImageView;
14import javafx.scene.layout.AnchorPane;
15import javafx.scene.layout.BorderPane;
16import javafx.scene.layout.FlowPane;
17import javafx.scene.layout.StackPane;
18import javafx.scene.paint.Color;
19import javafx.stage.Stage;
20import javafx.util.Duration;
21import uk.co.caprica.vlcj.factory.MediaPlayerFactory;
22import uk.co.caprica.vlcj.player.base.MediaPlayer;
23import uk.co.caprica.vlcj.player.base.MediaPlayerEventAdapter;
24import uk.co.caprica.vlcj.player.embedded.EmbeddedMediaPlayer;
25
26import java.util.ArrayList;
27import java.util.List;
28
29import static uk.co.caprica.vlcj.javafx.videosurface.ImageViewVideoSurfaceFactory.videoSurfaceForImageView;
30
31/**
32 *
33 */
34public class VlcjJavaFxApplication extends Application {
35
36 private final MediaPlayerFactory mediaPlayerFactory;
37
38 private final EmbeddedMediaPlayer embeddedMediaPlayer;
39
40 private ImageView videoImageView;
41
42 Slider progress=new Slider();
43
44 public VlcjJavaFxApplication() {
45 this.mediaPlayerFactory = new MediaPlayerFactory();
46 this.embeddedMediaPlayer = mediaPlayerFactory.mediaPlayers().newEmbeddedMediaPlayer();
47 this.embeddedMediaPlayer.events().addMediaPlayerEventListener(new MediaPlayerEventAdapter() {
48 @Override
49 public void mediaPlayerReady(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
50 Platform.runLater(()->{
51 progress.setValue(0);
52 progress.setMax(embeddedMediaPlayer.media().info().duration());
53
54 progress.setMin(0);
55 });
56 }
57 @Override
58 public void playing(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
59
60 }
61
62 @Override
63 public void paused(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
64 }
65
66 @Override
67 public void stopped(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer) {
68 }
69
70 @Override
71 public void timeChanged(uk.co.caprica.vlcj.player.base.MediaPlayer mediaPlayer, long newTime) {
72 Platform.runLater(()->{
73 progress.setValue(newTime);
74 });
75
76 }
77 });
78 }
79
80 @Override
81 public void init() {
82 this.videoImageView = new ImageView();
83 this.videoImageView.setPreserveRatio(true);
84
85 embeddedMediaPlayer.videoSurface().set(videoSurfaceForImageView(this.videoImageView));
86 }
87
88 @Override
89 public final void start(Stage primaryStage) throws Exception {
90 List<String> params = new ArrayList<String>();
91 params.add("/Users/baixq/Downloads/妙味课堂xhtml+css2/妙味课堂-XHTMLCSS2整站视频教程-4.avi");
92 if (params.size() != 1) {
93 System.out.println("Specify a single MRL");
94 System.exit(-1);
95 }
96 StackPane root=new StackPane();
97 //BorderPane root = new BorderPane();
98 root.setStyle("-fx-background-color: black;");
99
100 videoImageView.fitWidthProperty().bind(root.widthProperty());
101 videoImageView.fitHeightProperty().bind(root.heightProperty());
102
103 root.widthProperty().addListener((observableValue, oldValue, newValue) -> {
104 // If you need to know about resizes
105 });
106
107 root.heightProperty().addListener((observableValue, oldValue, newValue) -> {
108 // If you need to know about resizes
109 });
110
111
112
113 Scene scene = new Scene(root, 1200, 675, Color.RED);
114 primaryStage.setTitle("vlcj JavaFX");
115 primaryStage.setScene(scene);
116
117 AnchorPane contrlBox=new AnchorPane();//操作面板上的控制模块
118 contrlBox.prefWidthProperty().bind(root.widthProperty());
119 contrlBox.prefHeightProperty().bind(root.heightProperty().multiply(0.1));
120
121 BorderPane controlBar=new BorderPane();
122 controlBar.setStyle("-fx-background-color: #130c0e;");
123 controlBar.prefWidthProperty().bind(root.widthProperty());
124 controlBar.prefHeightProperty().bind(root.heightProperty().multiply(0.1));
125 controlBar.setCenter(progress);
126 Button fullScreen=new Button("全屏");
127 controlBar.setRight(fullScreen);
128
129 contrlBox.getChildren().add(controlBar);
130 contrlBox.setBottomAnchor(controlBar, 0.0);
131
132
133 root.getChildren().addAll(videoImageView,contrlBox);
134
135
136 primaryStage.show();
137 embeddedMediaPlayer.media().play(params.get(0));
138
139 fullScreen.setOnAction(event->{
140 primaryStage.setFullScreen(true);
141 });
142
143 root.setOnMouseEntered(event->{
144 Platform.runLater(()->{
145 FadeTransition ft = new FadeTransition(Duration.millis(500), contrlBox);
146 ft.setFromValue(0.0);
147 ft.setToValue(1);
148 //ft.setCycleCount(Timeline.INDEFINITE);
149 ft.setAutoReverse(false);
150
151
152 ft.play();
153 contrlBox.setVisible(true);
154 });
155
156
157
158 });
159
160 root.setOnMouseExited(event->{
161 Platform.runLater(()->{
162 FadeTransition ft = new FadeTransition(Duration.millis(500), contrlBox);
163 ft.setFromValue(1);
164 ft.setToValue(0.0);
165 ft.setAutoReverse(false);
166
167
168
169 ft.play();
170 contrlBox.setVisible(false);
171 });
172 });
173
174 //embeddedMediaPlayer.controls().setPosition(0.4f);
175 }
176
177 @Override
178 public final void stop() {
179 embeddedMediaPlayer.controls().stop();
180 embeddedMediaPlayer.release();
181 mediaPlayerFactory.release();
182 }
183
184 public static void main(String[] args) {
185 launch(args);
186 }
187}-Dprism.dirtyopts=false
188-Dprism.forceUploadingPainter=true
189
This is mentioned under "Linux notes" here: https://github.com/caprica/vlcj-javafx-demo/tree/vlcj-5.x
I have seen similar painting glitches on Linux before and in all cases using these properties, at least for me, clears the issue with only a small hit to performance - even when doing something like a full-screen grid of nine concurrent media players, where each one had an animating video controls overlay.
QUESTION
Replacing YouTube HTML links with embed code
Asked 2022-Jan-30 at 22:33I'm writing web pages in markdown and converting them to HTML using md2html
tool. I want to process the output HTML file and find any youtube link like this:
<a href="https://www.youtube.com/watch?v=abcdefgh887">https://www.youtube.com/watch?v=abcdefgh887</a>
and replace it with the embed code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/abcdefgh887?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I toyed around a little with Grammars, mostly to get familiar with them, but concluded this probably isn't the ideal tool for the job. Plus I'd prefer to use existing modules that are easily adaptable to other similar tasks rather than roll my own half-baked solution.
Perl5 has some good tools for this kind of thing but I'd like to use a pure Raku solution so I can learn more Raku.
Any recommendations for good approaches to this problem?
ANSWER
Answered 2022-Jan-28 at 20:31I tried to answer your question without knowing an example.
You need to extract youtubeId from A tag and then replace A tag into iframe tag.
pseudo code is:
1for each line:
2 if is youtube A tag,
3 youtube A tag = youtube Iframe tag
4
Please paste your input file into my input variable.
1for each line:
2 if is youtube A tag,
3 youtube A tag = youtube Iframe tag
4const input = `
5text1
6<a href="https://www.youtube.com/watch?v=youtubeId1">https://www.youtube.com/watch?v=youtubeId1</a>
7text2
8text3
9<a href="https://www.youtube.com/watch?v=youtubeId2">https://www.youtube.com/watch?v=youtubeId2</a>
10`;
11
12const rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?<]*).*/;
13
14const getYoutubeIframe = (youtubeId) => {
15 return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${youtubeId}?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
16}
17
18const output = input.split('\n').map(line => {
19 const youtubeLink = '<a href="https://www.youtube.com/watch?v=';
20 if (line.trim().indexOf(youtubeLink) === 0) {
21 const youtubeId = line.match(rx)[1];
22 return getYoutubeIframe(youtubeId);
23 }
24 return line;
25}).join('\n');
26
27console.log(output);
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Video Player
Tutorials and Learning Resources are not available at this moment for Video Player