CODEWITHSUNDEEP
phphtmldomreplacetags
gamau6
gamau6

Reputation: 39

Replace <img> tag with a src value ending in "webm" with a <video> tag

I need to change an <img> tag for a <video> tag. I do not know how to continue with the code as I can change all tags provided they contain a WebM.

function iframe($text) {
    $Dom = new DOMDocument;
    libxml_use_internal_errors(true);
    $Dom->loadHTML($text);
    $links = $Dom->getElementsByTagName('img');
    foreach ($links as $link) {
        $href = $link->getAttribute('src');
        if (!empty($href)) {
            $pathinfo = pathinfo($href);
            if (strtolower($pathinfo['extension']) === 'webm') {
                //If extension webm change tag to <video>
            }        
        }
    }
    $html = $Dom->saveHTML();
    return $html;
}

Upvotes: 1

Views: 1205

Answers (3)

Jens A. Koch
Jens A. Koch

Reputation: 41796

Like Roman i'm using http://php.net/manual/en/domnode.replacechild.php

but i'm using a for-iteration and test for .webm extension in the src with a simple strpos().

$contents = <<<STR
this is some HTML with an <img src="test1.png"/> in it.
this is some HTML with an <img src="test2.png"/> in it.
this is some HTML with an <img src="test.webm"/> in it,
but it should be a video tag - when iframe() is done.
STR;

function iframe($text)
{
    $dom = new DOMDocument;
    libxml_use_internal_errors(true);
    $dom->loadHTML($text);

    $images = $dom->getElementsByTagName("img");

    for ($i = $images->length - 1; $i >= 0; $i --) {
        $nodePre = $images->item($i);
        $src     = $nodePre->getAttribute('src');
        // search in src for ".webm"
        if(strpos($src, '.webm') !== false ) {

            $nodeVideo = $dom->createElement('video');
            $nodeVideo->setAttribute("src", $src);
            $nodeVideo->setAttribute("controls", '');

            $nodePre->parentNode->replaceChild($nodeVideo, $nodePre);
        }
    }

    $html = $dom->saveHTML();
    return $html;
};

echo iframe($contents);

Part of output:

this is some HTML with an <video src="test.webm"></video> in it,
but it should be a video tag - when iframe() is done.

Upvotes: 1

RomanPerekhrest
RomanPerekhrest

Reputation: 92904

Solution with DOMDocument::createElement and DOMNode::replaceChild functions:

function iframe($text) {
    $Dom = new DOMDocument;
    libxml_use_internal_errors(true);
    $Dom->loadHTML($text);
    $links = $Dom->getElementsByTagName('img');
    foreach ($links as $link) {
        $href = $link->getAttribute('src');
        if (!empty($href)) {
            $pathinfo = pathinfo($href);
            if (strtolower($pathinfo['extension']) === 'webm') {
                //If extension webm change tag to <video>
                $video = $Dom->createElement('video');
                $video->setAttribute("src", $href);
                $video->setAttribute("controls", '');
                $link->parentNode->replaceChild($video, $link);
            }        
        }
    }
    $html = $Dom->saveHTML();
    return $html;
}

http://php.net/manual/en/domdocument.createelement.php

http://php.net/manual/en/domnode.replacechild.php

Upvotes: 0

fusion3k
fusion3k

Reputation: 11689

Use this code:

(...)
if( strtolower( $pathinfo['extension'] ) === 'webm') 
{
    //If extension webm change tag to <video>
    $new = $Dom->createElement( 'video', $link->nodeValue );
    foreach( $link->attributes as $attribute )
    {
        $new->setAttribute( $attribute->name, $attribute->value );
    }
    $link->parentNode->replaceChild( $new, $link );
}
(...)

By code above I create a new node with video tag and nodeValue as img node value, then I add to new node all img attributes, and finally I replace old node with new node.

Please note that if the old node has id, the code will produce a warning.

Upvotes: 0

Related Questions